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内 容 简 介 


本 书 以 Web 前 端 开发 过 程 中 的 实际 需要 和 应 该 掌握 的 技术 为 基础 全面 .系统 地 介绍 了 Web 前 端 开 
发 所 涉及 的 相关 知识 点 和 开发 技巧 ,涵盖 HTML( 含 HTML 5) .CSS( 含 CSS 3) ,JavaScript 基础 及 jQuery 
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部 分 为 进 阶 篇 ,详细 介绍 了 JavaScript 的 面向 对 象 编程 思想 及 常用 的 JavaScript 框架 ,重点 介绍 了 jQuery 
框架 的 使 用 ,并 辅 以 大 量 的 案例 和 综合 实例 进行 讲解 ,让 读者 能 通过 本 阶段 的 学 习 提高 前 端 设计 和 编程 的 
能 力 ; 第 三 部 分 为 实战 篇 ,综合 运用 前 两 部 分 的 理论 知识 ,结合 软件 开发 流程 ,详细 讲解 了 “点 餐 系统 ”前端 
的 功能 设计 ,编程 实现 及 各 方面 的 内 容 和 技巧 。 
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近 十 年 来 ,信息 技术 产业 发 展 态势 良好 ,在 我 国 经 济 发 展 中 起 着 非常 重 
要 的 推动 作用 。 信 息 技 术 产业 也 是 “十 三 五 ?期 间 被 列 为 重点 发 展 的 产业 ， 
市 场 前 景 广阔 , Web 前 端 开发 工程 师 的 需求 量 大 幅 增加 。 一 名 合格 的 Web 
前 端 开发 工程 师 必须 掌握 基本 的 Web 前 端 开发 技术 ,包括 CSS .HTML、 
DOM JavaScript\ajax 等 ,在 掌握 这 些 技术 的 同时 ,更 要 清楚 地 了 解 它们 在 
不 同 浏览 器 上 的 兼容 情况 、 泻 染 原 理 和 潜在 的 Bug。 一 名 合格 的 前 端 工 程 
师 除 了 掌握 网 站 性 能 优化 .SEO 和 服务 器 端的 基础 知识 等 知识 结构 之 外 ,还 
必须 学 会 运用 各 种 工具 进行 辅助 开发 ,比如 处 理 IE 系列 浏览 器 兼容 性 问题 
的 IEtester, Firefox 排 错 用 的 Firebug、FlashFirebug、Debugger 等 调试 工 
具 。 总 而 言 之 ,一 名 合格 的 Web 前 端 开发 工程 师 不 但 要 掌握 技术 层面 的 知 
识 , 还 要 掌握 理论 层面 的 知识 ,包括 代码 的 可 维护 性 ,组 件 的 易 用 性 、 分 层 语 
义 模板 和 浏览 器 分 级 支持 等 内 容 。 

本 书 基于 HTML、CSS jQuery ,ajax 等 技术 编写 ,重点 突出 交互 式 的 
Web 前 端 技术 实现 。 本 书 赛 括 了 编者 及 其 团队 成 员 多 年 Web 前 端 开发 与 
设计 的 经 验 , 是 一 本 可 以 使 读者 快速 建立 规范 的 Web 前 端 开发 意识 和 工程 
化 软件 开发 思想 的 书籍 ,是 一 本 可 以 使 读者 快速 提高 Web 前 端 开 发 技能 并 
快速 达到 Web 前 端 开发 工程 师 岗 位 任职 能 力 要 求 的 书籍 。 本 书 内 容 编 排 
结构 合理 ,知识 由 浅 入 深 , 以 较 全 面 的 知识 点 ,丰富 的 案例 .完整 的 综合 项 目 
实践 为 主要 内 容 , 结 合 分 层 开 发 思想 ,循序 渐进 地 引导 读者 在 基础 篇 学 习 基 
础 理论 ,在 进 阶 篇 学 习 编程 技巧 ,在 高 级 篇 通过 综合 项 目 实战 提高 Web 前 
端 开 发 技能 。 

本 书 由 冷 亚 洪 、 黄 炜 负责 全 书 的 编写 、 统 稿 、 知 识 点 及 案例 设计 。 具 体 
编写 分 工 为 : 第 1 章 由 李 发 陵 编写 ,第 2 章 由 冷 亚 洪 编写 .第 3、4 章 由 阐 洪 
编写 ,第 5.6 章 由 宋 宇 编写 ,第 7、8 章 由 黄 炜 编写 。 

本 书 的 特色 如 下 : 

(1) 本 书 内 容 编排 结构 合理 ,知识 点 由 浅 入 深 .循序 渐进 地 引导 读者 快 
速 入 门 , 并 能 提高 初级 及 以 上 读者 的 实际 应 用 水 平 ,让 读者 能 够 快速 适应 对 
Web 前 端 开发 工程 师 岗 位 的 新 要 求 。 

(2) 本 书 采用 “案例 制 " 和 “项 目 制 ” 相 结合 的 思想 ,通过 大 量 的 案例 帮 
助 读者 对 知识 点 的 理解 及 掌握 ,使 用 综合 项 目 案例 (在 线 订 餐 系 统 ) 提 升 读 
者 的 综合 应 用 能 力 。 


叫 


交互 式 web 前 端 开发 实践 

(3) 本 书 重点 突出 Web 的 交互 式 开发 ,结合 软件 的 面向 对 象 和 分 层 开发 思想 进行 编 
程 ,让 读者 掌握 的 不 仅 是 传统 的 HTML 十 DIV 十 CSS 十 jQuery 编程 ,而 且 会 掌握 软件 开发 
思想 ,掌握 前 端 与 后 台 之 间 的 交互 式 设计 与 实现 。 

(4) 本 书 在 综合 项 目 案 例 部 分 ,提供 了 Java 和 C# 两 种 语言 实现 后 台 的 数据 处 理 , 方 便 
Java 和 C# 方 向 的 读者 学 习 。 

(5) 本 书 使 用 市 场 上 最 流行 的 软件 开发 技术 ,使 读者 在 完成 本 书 的 学 习 后 ,可 以 无 颖 地 
过 渡 到 对 应 的 工作 岗位 。 

我 们 期 望 本 书 能 为 阅读 者 们 提供 以 下 帮助 。 

(1) 软件 类 应 用 型 本 科 或 高 职高 专人 才 培 养 的 实 训 教材 。 

(2) Web 前 端 开发 工程 师 的 岗 前 学 习 教 材 。 

(3) 培训 机 构 的 培训 教材 。 

(4) Web 前 端 开发 工程 师 的 能 力 提升 学 习 书籍 。 

在 本 书 的 编写 过 程 中 ,参阅 了 大 量 的 资料 ,尤其 是 参考 文献 中 列 出 的 资料 。 在 此 对 所 有 
资料 的 编写 者 表示 衷心 的 感谢 ! 由 于 本 书 内 容 涉 及 面 广 , 加 之 编者 的 水 平 有 限 ,不当 之 处 在 
所 难免 ,县 请 广大 读者 朋友 批评 ,指正 ,我 们 将 不 胜 感激 ,编者 的 邮箱 是 7357220@qq. com。 





编 者 
2017 年 1 月 
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第 1 章 Web 前 端 开发 概述 


1.1 Web 概述 


Web 是 Internet 中 最 受 欢 迎 的 一 种 多 媒体 信息 服务 系统 。 整 个 系统 由 Web 服务 器 、 浏 
览 器 和 通信 协议 组 成 。 通 信 协 议 HTTP 能 够 传输 任意 类 型 的 数据 对 象 来 满足 Web 服务 器 
与 客户 之 间 的 多 媒体 通信 的 需要 。Web 带 来 的 是 世界 范围 的 超级 文本 服务 。 用 户 可 通过 
Internet 从 全 世界 任何 地 方 调 来 所 和 希望 得 到 的 文本 .图像 (包括 活动 影像 ) 和 声音 等 信息 。 
另外 ,Web 还 可 提供 其 他 的 Internet 服务 如 Telnet\FTP .Gopher 和 Net User 等 。 

在 Web 网 站 上 ,不仅 可 以 传递 文字 信息 ,还 可 以 传递 图 形 .声音 .影像 .动画 等 多 媒体 信 
息 。Web 的 成 功 在 于 使 用 了 HTTP 超 文本 传输 协议 ,制定 了 一 套 标准 的 、 易 为 人 们 掌握 的 
超 文本 标记 语言 HTML ,使 用 了 信息 资源 的 统一 定位 格式 URL。 我 们 可 以 把 Web 看 作 一 
个 图 书馆 ,而 每 一 个 网 站 就 是 这 个 图 书馆 中 的 一 本 书 。 每 个 网 站 都 包括 许多 画面 ,进入 该 网 
站 时 显示 的 第 一 个 画面 就 是 “主页 "或 “首页 "(相当 于 书 的 目录 ), 而 同一 个 网 站 的 其 他 画面 
都 是 “网 页 "(相当 于 书页 )。 

1. HTTP 协议 

从 网 络 协议 的 角度 看 ,HTTP 是 对 TCP/IP 协议 集 的 扩展 ,作为 浏览 器 与 服务 器 间 的 
通信 协议 ,处 于 TCP/IP 层次 中 的 应 用 层 。 

HTTP 是 一 种 无 状态 协议 , 即 服务 器 不 保留 与 客户 交易 时 的 任何 状态 ,这 可 以 大 大 减 
轻 服务 器 的 存储 负担 ,从 而 保持 较 快 的 响应 速度 。HTTP 又 是 一 种 面向 对 象 的 协议 ,允许 
传输 任意 类 型 的 数据 对 象 。 它 通过 数据 类 型 和 长 度 来 标识 所 传送 的 数据 内 容 和 大 小 ,并 多 
许 对 数据 进行 压缩 传送 。 浏 览 器 软件 配置 于 用 户 端 计 算 机 上 ,用 户 发 出 的 请 求 通过 浏览 器 
分 析 后 , 按 HTTP 规范 送 给 服务 器 ,服务 器 按 用 户 需 求 ,将 HTML( 超 文本 标记 语言 ) 文 档 
送 回 给 用 户 。 

2. Web 服务 的 基本 过 程 

Web 最 吸引 人 的 地 方 是 它 的 “简单 性 ”, 其 工作 过 程 也 是 客户 机 /服务 器 模式 (C/S)。 
Web 的 工作 可 分 为 4 个 基本 阶段 : 连接 ,请求 .响应 和 关闭 ( 见 图 1-1)。 它 们 都 属于 HTTP 
的 下 层 基 础 。 信 息 资 源 以 网 页 (HTML 文件 ) 形 式 存 储 在 Web 服务 器 中 , 当 用 户 希 望 得 到 
某 种 信息 时 ,要 先 与 Internet 沟通 连接 (上 网 ) ;然后 用 户 通过 Web 客户 端 程序 (浏览 器 ) 向 
Web 服务 器 发 出 请 求 ; Web 服务 器 根据 客户 的 请 求 给 予 响应 ,将 在 Web 服务 器 中 存放 的 、 
符合 用 户 要 求 的 某 个 网 页 发 送 给 客户 端 ,浏览 器 在 收 到 该 页 面 后 对 其 进行 解释 ,最 终 将 图 文 
等 信息 呈现 给 客户 ;一 次 Web 服务 操作 结束 后 ,关闭 此 次 连接 ,或 用 户 根 据 需 要 进行 下 一 次 
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请 求 。 这 样 ,用 户 可 以 通过 网 页 中 的 链接 ,方便 地 访问 位 于 其 他 Web 服务 器 中 的 页 面 或 其 
他 类 型 的 网 络 信息 资源 。 










1. 连接 到 服务 器 
2. 发 送 请 求 
3. 发 送 响应 
4. 关闭 连接 








客服 机 


Web 服 务 器 
1-1 HTTP 的 请 求 响应 模型 


Web 服务 器 集成 了 所 有 视觉 辅助 效果 来 表示 信息 ,这 些 信息 可 以 按 多 种 格式 存在 ， 
易于 浏览 和 理解 。 例 如 ,在 讨论 复杂 问题 时 ,可 以 使 用 图 表 、 影 像 剪辑 甚至 交互 式 应 用 程 
序 ,而 不 仅仅 是 字符 文本 ,这 样 便 于 解释 论题 ,使 人 一 目 了 然 。 与 其 他 信息 发 布 工具 相 
比 , Web 服务 由 于 所 需 的 费用 很 低 并 且 覆 盖 面 广 ,因而 具有 很 大 的 吸引 力 。 另 外 ,使 用 各 
种 搜索 机 制 和 Web 站 点 分 类 目录 数据 库 注册 一 个 Web 站 点 ,可 以 使 客户 在 需要 时 得 到 
所 需 的 信息 。 


1.1.1 Web 的 发 展 


最 早 的 网 络 构想 可 以 追溯 到 1980 年 蒂 姆 ， 伯 纳 斯 。 李 构建 的 ENQUIRE 项 目 。 这 是 
一 个 类 似 维 基 百 科 的 超 文本 在 线 编辑 数据 库 。 尽 管 这 与 万 维 网 大 不 相同 ,但 是 它们 有 许多 
相同 的 核心 思想 ,其 至 还 包括 一 些 伯 纳 斯 李 的 万 维 网 (World Wide Web, WWW, 也 作 
Web、W3) 之 后 的 下 一 个 项 目 语义 网 中 的 构想 。 

1989 年 3 月 , 伯 纳 斯 * 李 撰 写 了 《关于 信息 化 管理 的 建议 ) 一 文 ,文中 提 及 ENQUIRE 
并 且 描 述 了 一 个 更 加 精巧 的 管理 模型 。1990 年 11 月 12 日 他 和 罗伯特 ， 卡 里 奥 (Robert 
Cailliau) 合 作 提出 了 一 个 更 加 正式 的 关于 万 维 网 的 建议 。 在 1990 年 11 月 13 日 他 在 一 台 
工作 站 上 设计 了 第 一 个 网 页 以 实现 他 文中 的 想法 。 

在 那 年 的 圣诞 假期 , 伯 纳 斯 " 李 制 作 了 让 一 个 网 络 工作 所 必需 的 所 有 工具 : 第 一 个 万 
维 网 浏览 器 (同时 也 是 编辑 器 ) 和 第 一 个 网 页 服务 器 。 

1991 年 8 月 6 日 ,他 在 alt. hypertext 新 闻 组 上 发 表 了 万 维 网 项 目 简介 的 文章 ,这 一 天 
也 标志 着 因特网 上 万 维 网 公共 服务 的 首次 亮相 。 

万 维 网 中 至 关 重 要 的 超 文本 概念 起 源 于 20 世纪 60 年 代 的 几 个 项 目 。 壁 如 泰 德 . 尼 尔 
森 ( Ted Nelson) 的 仙 那 都 项 目 (project Xanadu) 和 道格拉斯 。 英 格 巴 特 (Douglas 
Engelbart) 的 NLS。 而 这 两 个 项 目的 灵感 都 是 来 源 于 万 尼 瓦 尔 。 布什 在 其 1945 年 发 表 的 
《和 我 们 想 的 一 样 ) 论 文中 为 微缩 胶片 设计 的 “记忆 延伸 "(memex) 系 统 。 

蒂 姆 . 伯 纳 斯 . 李 的 另 一 个 才华 横 溢 的 突破 是 将 超 文 本 嫁接 到 因特网 上 。 在 他 的 《 编 
织 网 络 ) 一 书 中 ,他 解释 说 自己 曾 一 再 向 使 用 者 们 建议 这 两 种 技术 的 结合 是 可 行 的 ,但 是 没 
有 任何 人 响应 他 的 建议 ,最 后 他 只 好 自己 解决 了 这 个 问题 。 他 发 明了 一 个 全 球 网 络 资源 唯 
一 认证 的 系统 : 统一 资源 标识 符 。 
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万 维 网 和 其 他 超 文 本 系统 有 很 多 不 同 之 处 。 

(1) 万 维 网 上 需要 单项 链接 而 不 是 双向 链接 ,这 使 得 任何 人 可 以 在 资源 拥有 者 不 做 任 
何 改变 时 链接 该 资源 。 与 早期 的 网 络 系统 相 比 , 这 对 于 网 络 服务 器 和 网 络 浏览 器 来 说 已 经 
是 很 大 的 进步 ,但 它 的 副作用 是 产生 了 坏 链 的 问题 。 

(2) 万 维 网 不 像 某 些 应 用 软件 如 HyperCard 那样 是 私有 的 ,这 使 得 服务 器 和 客户 端 能 
够 独立 地 发 展 和 扩展 ,而 不 受 许可 权限 制 。 

1993 年 4 月 30 日 ,欧洲 核子 研究 组 织 宣布 万 维 网 对 任何 人 免费 开放 ,并 且 不 收取 任何 
费用 。 两 个 月 之 后 Gopher 宣布 不 再 免费 ,从 而 造成 大 量 用 户 从 Gopher 转向 万 维 网 联盟 。 
万 维 网 联盟 (World Wide Web Consortium,W3C) 又 称 W3C 理事 会 。1994 年 10 月 在 麻 省 
理工 学 院 计 算 机 科学 实验 室 成 立 , 建 立 者 是 万 维 网 的 发 明 者 蒂 姆 . 伯 纳 斯 " 李 。 


1.1.2 Web 特点 及 架构 


1. Web 的 形式 及 特点 

(1) 易于 导航 的 图 形 化 Web 

Web 非常 流行 的 一 个 很 重要 的 原因 就 在 于 它 可 以 在 一 页 上 同时 显示 色彩 丰富 的 图 形 
和 文本 的 性 能 。 在 Web 之 前 Internet 上 的 信息 只 有 文本 形式 。Web 可 以 提供 将 图 形 、 音 
频 、 视 频 信息 集合 于 一 体 的 特性 。 同 时 ,Web 是 非常 易于 导航 的 ,只 需要 从 一 个 链接 跳 到 另 
一 个 链接 ,就 可 以 在 各 页 各 站 点 之 间 进 行 浏览 。 

(2) 与 平台 无 关 的 Web 

无 论 用 户 的 系统 平台 是 什么 ,都 可 以 通过 Internet 访问 万 维 网 。 浏 览 万 维 网 对 用 户 的 
系统 平台 没有 什么 限制 。 对 万 维 网 的 访问 是 通过 一 种 叫 作 浏览 器 (browser) 的 软件 实现 的 ， 
如 Netscape 的 Navigator、NCSA 的 Mosaic、Microsoft 的 Internet Explorer 等 。 

(3) 分 布 式 的 Web 

大 量 的 图 形 .音频 和 视频 信息 会 占用 相当 大 的 磁盘 空间 ,用 户 甚至 无 法 预知 信息 的 多 
少 。 对 于 Web 没有 必要 把 所 有 信息 都 放 在 一 起 ,信息 可 以 放 在 不 同 的 站 点 上 。 只 需要 在 浏 
览 器 中 指明 这 个 站 点 就 可 以 了 。 这 使 得 在 物理 上 并 不 一 定 在 一 个 站 点 的 信息 在 逻辑 上 实现 
了 一 体 化 ,至 少 从 用 户 的 角度 来 看 这 些 信息 是 一 体 的 。 

图 1-2 展示 了 Web 之 间 的 典型 链接 方式 ,Web 站 点 都 存在 于 不 同 的 物理 位 置 ,站 点 上 
存放 着 各 种 文档 ,这 些 文档 中 有 一 些 文字 与 其 他 文字 的 显示 方式 有 所 区 别 , 用 于 链接 到 其 他 
站 点 , 称 为 超 链接 ”, 用 户 只 要 在 上 面 单 击 . 浏 览 器 就 可 以 跳 转 到 对 应 的 站 点 并 显示 相应 的 
内 容 。 

(4) 交互 式 的 动态 Web 
由 于 各 Web 站 点 的 信息 包含 站 点 本 身 的 信息 ,信息 的 提供 者 可 以 经 常 对 站 点 中 的 信 
息 进行 更 新 ,如 某 个 协议 的 发 展 状况 、 公 司 的 广告 等 ,Web 站 点 上 的 信息 是 需要 经 常 更 
新 的 。 

Web 的 交互 性 首先 表现 在 它 的 超 链接 上 ,用 户 的 浏览 顺序 和 所 访问 的 站 点 完全 由 他 自 
己 决 定 。 系 统 另外 通过 HTTP 的 Get 请 求 从 服务 器 中 获得 动态 的 信息 ,用 户 通过 填写 
form 表单 向 服务 器 提交 (HttpPosb 请 求 , 服 务 器 根据 用 户 的 请 求 返回 相应 信息 ,实现 良好 
的 人 机 交互 ,如 图 1-3 所 示 。 
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一 ~、 链 接 到 一- 2 
Se 链接 到 / 2 





站 点 D 
图 1-2 Web 站 点 之 间 的 链接 
























































Web 浏 览 器 HTTP 请 求 Web 服 务 器 ”服务 器 端 应 用 
@| 人 @| “7 国 处 理 结果 
网 页 
计算 机 WWW 服 务 器 


图 1-3 动态 网 页 示意 图 


2. C/S 与 B/S 架构 
(1) C/S 架 构 


C/S(Client/Server) 又 称 客户 /服务 器 模式 ,是 大 家 熟知 的 软件 系统 体系 结构 ,这 种 模式 
通过 将 任务 合理 分 配 到 客户 端 和 服务 器 端 ,降低 了 系统 的 通信 开销 ,但 需要 安装 客户 端 才 可 


进行 管理 操作 。 


客户 端 和 服务 器 端的 程序 不 同 ,用 户 的 程序 主要 在 客户 端 ,客户 端 程序 主要 完成 用 户 具 
体 的 业务 。 客 户 端 需要 安装 专用 的 客户 端 软件 。 服 务 器 端 主要 提供 数据 管理 .数据 共享 、 数 
据 及 系统 维护 和 并 发 控制 等 功能 。 服 务 器 通常 采用 高 性 能 的 PC、 工作站 或 小 型 机 ,并 采用 


大 型 数据 库 系 统 ,如 Oracle、Sybase、Informix 或 SQL Server。 


C/S 模式 的 优点 是 能 充分 发 挥 客户 端 PC 的 处 理 能 力 ,很 多 工作 可 以 在 客户 端 处 理 后 


再 提交 给 服务 器 ,其 优点 就 是 客户 端 响应 速度 快 ,存在 的 缺点 如 下 : 
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随 着 互联 网 的 飞速 发 展 , 移 动 办 公 和 分 布 式 办 公 越 来 越 普 及 ,这 需要 使 我 们 设计 的 系统 
具有 扩展 性 。 这 种 方式 的 远程 访问 需要 专门 的 技术 ,同时 要 对 系统 进行 专门 的 设计 来 处 理 
分 布 式 的 数据 。 

客户 端 需要 安装 专用 的 客户 端 软 件 。 首 先 涉 及 安装 的 工作 量 ; 其 次 任何 一 台 计 算 机 出 
问题 ,如 病毒 、 硬 件 损 坏 ,都 需要 进行 安装 或 维护 ,特别 是 一 个 单位 有 很 多 分 部 或 专卖 店 的 情 
况 下 ,不 是 工作 量 的 问题 ,而 是 路 程 的 问题 。 还 有 ,系统 软件 升级 时 ,每 一 台 客 户 机 都 需要 重 
新 安装 ,其 维护 和 升级 成 本 非常 高 。 

客户 端的 操作 系统 一 般 有 一 定 的 限制 。 比 如 使 用 Windows 98 的 客户 端 不 能 用 
Windows 2000 或 Windows XP, 或 者 不 适用 于 微软 新 的 操作 系统 等 ,更 不 用 说 Linux、 
UNIX 等 。 

(2) B/S 架构 

B/S(Browser/Server) 架 构 是 浏览 器 和 服务 器 结构 ( 见 图 1-4)。 它 是 随 着 Internet 技术 
的 兴起 而 对 C/S 架构 进行 改进 的 结构 。 

表示 层 应 用 层 数据 层 






SQL 请 求 





数据 库 服务 器 
(SQL Server 2008) 





Web 服 务 器 
(HS) 


请 求 


Web 浏 览 器 (IE) 
1-4 ”B/S 系统 架构 


这 种 架构 中 客户 端 (Browser) 几乎 没有 专门 的 应 用 程序 ,应 用 程序 基本 上 都 在 服务 器 
端 (Server)。 由 于 客户 端 没 有 程序 ,应 用 程序 的 升级 和 维护 都 可 以 在 服务 器 端 完成 ,升级 维 
护 十 分 方便 。 由 于 客户 端 使 用 浏览 器 ,使 得 用 户 界面 “丰富 多 彩 ”. 但 数据 的 打印 输出 等 功能 
受到 了 限制 。 为 了 克服 这 个 缺点 ,一 般 把 利用 浏览 器 方式 实现 困难 的 功能 单独 开发 成 可 以 
发 布 的 控件 ,再 在 客户 端 利用 程序 进行 调用 。 

B/S 结构 是 Web 兴起 后 的 一 种 网 络 结 构 模 式 . Web 浏览 器 是 客户 端 最 主要 的 应 用 软 
件 。 这 种 模式 统一 了 客户 端 ,将 系统 功能 实现 的 核心 部 分 集中 到 服务 器 上 ,简化 了 系统 的 开 
发 .维护 和 使 用 。 客 户 机 上 只 要 安装 一 个 浏览 器 (Browser), 如 Netscape Navigator 或 
Internet Explorer ,服务器 上 安装 Oracle、Sybase、Informix 或 SQL Server 等 数据 库 。 浏 览 
器 通过 Web Server 同 数据 库 进行 数据 交互 ,这 样 就 大 大 简化 了 客户 端 计算 机 的 载荷 ,减轻 
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了 系统 维护 与 升级 的 成 本 和 工作 量 , 降 低 了 用 户 的 总 体 成 本 (TCO) 。 

(3) C/S 与 B/S 的 区 别 

C/S 建立 在 局 域 网 的 基础 上 ,B/S 建立 在 广域网 的 基础 上 。 其 区 别 主 要 有 如 下 几 点 。 

a 硬件 环境 不 同 : C/S 一 般 建 立 在 专用 的 网 络 上 ,形成 小 范围 的 局 域 网 环境 ,局 域 网 
之 间 通 过 专门 的 服务 器 提供 连接 和 数据 交换 服务 。B/S 建立 在 广域网 之 上 ,不 必 限 定 专门 
的 网 络 硬件 环境 。 例 如 电话 上 网 、 租 用 设备 .信息 管理 ,有 比 C/S 更 强 的 适应 范围 ,一 般 只 
要 有 操作 系统 和 浏览 器 就 行 。 

@ 对 安全 性 的 要 求 不 同 : C/S 一 般 面向 相对 固定 的 用 户 群 ,对 信息 安全 的 控制 能 力 很 
强 , 一 般 高 度 机 密 的 信息 系统 采用 C/S 结构 较 适宜 ,可 以 通过 B/S 发 布 部 分 公开 信息 。B/S 
建立 在 广域网 之 上 ,对 安全 的 控制 能 力 相 对 弱 , 面 向 不 可 知 的 用 户 群 。 

@ 程序 的 架构 不 同 : C/S 程序 可 以 更 加 注重 流程 ,可 以 对 权限 进行 多 层次 校 验 , 对 系 
统 的 运行 速度 可 以 较 少 考虑 。B/S 对 安全 性 以 及 访问 速度 要 进行 多 重 考虑 ,建立 在 需要 更 
加 优化 的 基础 上 , 比 C/S 有 更 高 的 要 求 。B/S 结构 的 程序 架构 是 发 展 的 趋势 ,从 微软 的 
. NET 系 列 到 BizTalk 2000、Exchange 2000 等 ,全 面 支持 网 络 构件 搭建 的 系统 。SUN 和 
IBM 推出 的 JavaBean 构件 技术 等 使 B/S 更 加 成 熟 。 

@ 软件 的 重用 性 不 同 : C/S 程序 必须 进行 整体 性 的 考虑 ,构件 的 重用 性 不 如 在 B/S 模 
式 下 构件 的 重用 性 好 。B/S 的 多 重 结 构 ,要 求 构 件 有 相对 独立 的 功能 ,因此 具有 相对 较 好 的 
重用 性 。 

@ 系统 维护 不 同 : 系统 维护 在 软件 生存 周期 中 的 开销 较 大 。C/S 程序 由 于 整体 性 强 ， 
必须 整体 考察 ,处 理 出 现 的 问题 以 及 系统 升级 较 难 ,有 时 可 能 需要 再 做 一 个 全 新 的 系统 。 
B/S 程序 由 构件 组 成 ,方便 个 别 构件 的 更 换 , 可 以 实现 系统 的 无 颖 升级 ,系统 维护 开销 可 以 
减 到 最 小 ,用 户 从 网 上 自己 下 载 并 安装 相关 程序 就 可 以 实现 系统 升级 。 

@ 处 理 的 问题 不 同 : C/S 程序 可 以 处 理 的 用 户 相 对 固定 并 且 在 相同 区 域 ,安全 性 要 求 
与 操作 系统 相关 性 高 。B/S 建立 在 广域网 上 ,面向 不 同 的 用 户 群 且 分 散在 不 同 地 域 ,这 是 
C/S 无 法 做 到 的 ,因此 与 操作 系统 平台 的 关系 最 小 。 

@ 用 户 接 口 不 同 : C/S 大 多 是 建立 在 Windows 平台 上 ,表现 方法 有 限 。 对 程序 员 要 求 
普遍 较 高 。B/S 建立 在 浏览 器 上 ,有 更 加 丰富 和 生动 的 方式 与 用 户 交 流 , 并 且 大 部 分 难度 较 
低 , 可 降低 开发 成 本 。 

@@ 信息 流 不 同 : C/S 程序 一 般 是 进行 典型 的 中 央 集 权 机 械 式 的 处 理 ,交互 性 相对 较 
低 。B/S 信息 流向 可 变化 ,B2B、B2C、B2G 等 信息 流向 的 变化 更 像 一 个 交易 中 心 。 


1.2 Web 新 技术 的 发 展 及 应 用 


Web 2.0 指 的 是 一 个 由 用 户主 导 来 创造 .协同 合作 、 分 享 各 种 资讯 与 内 容 的 开放 平台 。 
Web 2.0 是 网 络 运用 的 新 阶段 ,网 络 成 为 新 的 平台 ,内 容 因 为 每 位 使 用 者 的 参与 而 产生 ,所 
产生 的 个 人 化 的 内 容 通过 分 享 形成 了 现在 Web 2.0 的 世界 。Web 2.0 以 Blog、 Wiki、SNS 
等 社交 软件 的 应 用 为 核心 。Blog 即 网 上 日 记 , 可 以 在 其 中 迅速 发 布 想法 .与 他 人 交流 以 及 
从 事 其 他 活动 。Wiki( 维 基 百 科 ) 是 由 用 户 编 写 内 容 和 共享 内 容 的 网 站 ,每 个 人 都 可 以 发 表 
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自己 的 意见 ,或 者 对 共同 的 主题 进行 扩展 或 者 探讨 ,由 用 户 共同 建设 一 个 大 百科 全 书 。SNS 
(社交 网 络 服务 ) 专 指 旨 在 帮助 人 们 建立 社会 性 网 络 的 互联 网 应 用 服务 。 目 前 ,SNS 最 有 代 
表 性 的 公司 是 Facebook, 它 也 是 只 提供 开放 的 平台 ,而 不 提供 具体 的 内 容 和 服务 。 


1.2.1 Web 3.0 


1. 认识 web 3.0 

Web 3.0 只 是 由 业内 人 员 制 造 出 来 的 概念 词语 ,最 常见 的 解释 是 ,网 站 内 的 信息 可 以 直 
接 和 其 他 网 站 的 相关 信息 进行 交互 ,能 通过 第 三 方 信 息 平 台 同 时 对 多 家 网 站 的 信息 进行 整 
合 使 用 ;用 户 在 互联 网 上 拥有 自己 的 数据 ,并 能 在 不 同 网 站 上 使 用 ;完全 基于 Web ,用 浏览 
器 即 可 实现 复杂 系统 程序 才能 实现 的 系统 功能 。 用 户 数据 审计 后 ,同步 于 网 络 数据 。 

Web 3.0 的 倡导 者 和 实践 者 一 一 土豆 先生 所 谈 的 “什么 是 Web 3.0”, 是 目前 最 好 的 关 
于 Web 3.0 的 阐述 。 其 实 很 多 人 在 提 到 Web 2.0 的 时 候 就 说 ,还 会 有 Web 3.0, 但 他 们 并 
不 知道 Web 3.0 是 什么 ,会 在 什么 时 候 实 现 , 以 及 如 何 实现 ,有 哪些 特点 。 下 面 简单 阐述 一 
下 作者 对 Web 3.0 的 理解 ,假如 说 Web 1.0 的 本 质 是 联合 ,那么 Web 2.0 的 本 质 就 是 互动 ， 
它 让 网 民 更 多 地 参与 信息 产品 的 创造 ,传播 和 分 享 , 而 这 个 过 程 是 有 价值 的 。Web 2.0 的 缺 
点 是 没有 体现 出 网 民 劳 动 的 价值 ,所 以 Web 2.0 很 脆弱 ,缺乏 商业 价值 ,需要 跟 具 体 的 产业 
结合 起 来 才 会 获得 巨大 的 商业 价值 和 商业 成 功 。Web 3.0 是 在 Web 2.0 的 基础 上 发 展 起 
来 的 ,并 能 够 更 好 地 体现 网 民 的 劳动 价值 , 且 能 够 实现 价值 均衡 分 配 的 一 种 互联 网 方式 。 

总 体 而 言 ,Web 3. 0 更 多 的 不 仅仅 是 一 种 技术 上 的 革新 ,而 是 以 统一 的 通信 协议 ,通过 
更 加 简洁 的 方式 为 用 户 提供 更 为 个 性 化 的 互联 网 信息 资讯 而 定制 的 一 种 技术 整合 ,将 会 是 
互联 网 发 展 中 由 技术 创新 走向 用 户 理念 创新 的 关键 一 步 。 

互联 网 的 技术 日 新 月 异 ,互联 网 不 断 深入 人 们 的 生活 , Web 3.0 将 是 彻底 改变 人 们 生活 
的 互联 网 形式 。Web 3.0 使 所 有 网 上 公民 不 再 受到 现 有 资源 积累 的 限制 ,具有 更 加 平等 地 
获得 财富 和 声誉 的 机 会 。Web 3.0 会 从 哪里 开始 呢 ? 事实 上 ,已 经 有 了 Web 3.0, 只 不 过 还 
没有 得 到 足够 多 的 了 解 , 那 就 是 电子 商务 领域 和 在 线 游戏 。 不 管 是 B2C 还 是 C2C, 网 民利 
用 互联 网 提供 的 平台 进行 交易 ,在 这 个 过 程 中 ,他 们 通过 互联 网 进行 劳动 ,并 获得 了 财富 。 
在 线 游戏 通过 积分 的 方式 ,角色 扮演 者 通过 攻 城 掠 寨 \ 不 断 地 修炼 .花费 大 量 的 时 间 ,他们 在 
那里 可 以 获得 声誉 和 财富 ,而 这 种 财富 通过 一 定 的 方式 可 以 在 现实 中 兑换 , 正 所谓 人 生 如 同 
一 场 游戏 ,互联 网 会 让 人 们 的 生活 变 得 更 像 游戏 一 样 。 当 前 的 论坛 也 提供 积分 ,但 由 于 缺乏 
个 性 ,这 个 不 会 成 为 未 来 的 主流 ,最 有 代表 性 的 Blog , 却 在 积分 方面 做 得 很 少 , 人 们 的 劳动 
价值 没有 得 到 体现 , 正 因为 如 此 ,好 的 博 主将 另起炉灶 ,以 便 得 到 更 多 ,这 是 在 追求 一 种 更 加 
均衡 的 分 配方 式 。 当 这 个 Web 2. 0 的 参与 者 有 足够 的 力量 和 筹码 的 时 候 , 他 们 就 会 要 求 一 
种 对 其 更 加 公平 合理 的 分 配方 式 。 在 博 主 个 人 力量 不 够 的 时 候 , 可 以 通过 联合 的 方式 来 争 
取 自 己 的 利益 。 

2. Web 3.0 介绍 
上 所 述 ,可 以 得 知 Web 3.0 是 目前 所 能 想象 出 来 的 未 来 互联 网 应 用 的 框架 。 网 站 内 
信息 可 以 直接 和 其 他 网 站 信息 进行 交互 ,能 通过 第 三 方 信息 平台 同时 对 多 家 站 点 信息 进行 
整合 ;用 户 在 互联 网 上 拥有 自己 的 数据 ,并 能 在 不 同 的 网 站 上 使 用 ;完全 基于 Web 访问 ,用 
浏览 器 即 可 实现 复杂 的 系统 程序 才 具 有 的 功能 。 可 以 说 Web 3.0 是 三 广 十 三 跨 ( 广 域 的 、 
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广 语 的 .广博 的 , 跨 区 域 . 跨 语种 .跨行 业 )。Web 3.0 阶段 将 是 一 个 个 性 智能 化 的 时 代 ,无 论 
使 用 者 使 用 何 种 终端 ,只 要 打开 浏览 器 就 能 进入 自己 的 世界 ,就 能 看 到 自己 所 关心 的 内 容 ， 
而 不 再 需要 盲目 地 搜索 。 世 界 知 名 技术 未 来 预言 家 Nova Spivack 认为 Web 3.0 是 延伸 至 
当前 各 大 技术 潮流 迈 向 新 的 成 熟 阶段 的 具体 体现 ,包括 无 处 不 在 的 互联 网 络 、 云 计算 、 开 放 
软件 平台 和 数据 、 语 义 网 技术 、 智 能 网 络 和 智能 应 用 程序 。 

3. Web 3.0 的 特征 

Web 3.0 将 应 用 Mashup 技术 对 用 户 生成 的 内 容 信息 进行 整合 ,使 得 内 容 信息 的 特征 
性 更 加 明显 ,便于 检索 。 将 精确 地 阐明 信息 内 容 特征 的 标签 进行 整合 ,提高 信息 描述 的 精确 
度 , 从 而 便于 互联 网 用 户 的 搜索 与 整理 。 同 时 ,对 于 UGC(user generated content, 用 户 原 
创 内 容 ) 的 筛选 性 过 滤 也 将 成 为 Web 3. 0 不 同 于 Web 2.0 的 主要 特征 之 一 。 对 于 互联 网 
用 户 的 发 布 权限 经 过 长 期 的 认证 ,对 其 发 布 的 信息 做 不 同 可 信和 度 的 分 离 , 可 信 度 高 的 信 
息 将 会 被 推 到 互联 网 信息 检索 的 首 项 ,同时 提供 信息 的 互联 网 用 户 的 可 信 度 也 会 得 到 相 
应 的 提高 。 

最 后 聚合 技术 的 应 用 将 在 Web 3. 0 模式 下 发 挥 更 大 的 作用 ,TAG( 分 类 )/RSS( 聚 合 内 
容 ) 基 础 聚合 设施 ,渐进 式 语义 网 的 发 展 也 将 为 Web 3. 0 构建 完备 的 内 容 聚 合 与 应 用 聚合 
平台 。 将 传统 意义 的 聚合 技术 和 挖掘 技术 相 结 合 , 创 造 出 更 加 个 性 化 ,搜索 反应 迅速 ,准确 
的 “Web 挖掘 个 性 化 搜索 引擎 ”。 

(1) 适合 多 种 终端 平台 ,实现 信息 服务 的 普 适 性 

Web 3.0 的 网 络 模式 将 实现 不 同 终端 的 兼容 ,从 PC 互联 网 到 WAP 手机 、PDA 
(personal digital assistant, 掌 上 电脑 ) 机 项 盒 ,专用 终端 ,不 只 应 用 在 互联 网 这 一 单一 终 
端 上 。 

现 有 的 Web 2.0 只 能 通过 PC 终端 应 用 在 互联 网 这 一 单一 的 平台 上 ,面临 现在 层 出 不 
穷 的 新 的 移动 终端 的 开发 与 应 用 都 需要 新 的 技术 层面 和 理念 层面 的 支持 。 而 Web 3. 0 将 
打破 这 一 僵局 ,使 得 各 种 终端 的 用 户 群 体 都 可 以 享受 到 在 互联 网 上 冲浪 的 便捷 。 

实现 融合 网 络 的 普 适 化 .公用 显示 装置 与 个 人 智能 终端 的 通用 ,同时 加 入 E-RAD 的 应 
用 与 研发 ,使 得 嵌入 式 技术 在 Web 3. 0 模式 下 发 挥 更 大 的 效力 。 

(2) 良好 的 人 性 化 用 户 体 验 以 及 基础 性 的 个 性 化 配置 

Web 3.0 同样 以 人 为 本 ,将 用 户 的 偏好 作为 设计 的 主要 考虑 因素 。Web 3.0 在 对 UGC 
筛选 性 过 滤 的 基础 上 引入 了 偏好 信息 处 理 与 个 性 化 引擎 技术 ,对 用 户 的 行为 特征 进行 分 析 ， 
既 寻 找 可 信 度 高 的 UGC 发 布 源 ,同时 对 互联 网 用 户 的 搜索 习惯 进行 整理 .挖掘 ,得 出 最 佳 
的 设计 方案 ,帮助 互联 网 用 户 快 速 .准确 地 搜索 到 自己 感 兴趣 的 信息 内 容 , 避 免 了 搜索 大 量 
信息 带 来 的 疲劳 。 

个 性 化 搜索 引擎 以 有 效 的 用 户 偏好 信息 处 理 为 基础 ,对 用 户 进 行 的 各 种 操作 以 及 用 户 
提出 的 各 种 要 求 作为 依据 ,来 分 析 用 户 的 偏好 。 再 将 通过 偏好 系统 得 出 的 结论 归 类 到 一 起 ， 
在 某 个 主题 (如 体育 方面 ) 上 形成 一 种 内 容 , 并 进行 搜索 的 聚合 .推送 ,从 而 更 好 地 满足 用 户 
搜索 、 观 看 的 需要 。 将 这 一 技术 引入 广播 电视 中 来 ,将 会 给 传统 电视 带 来 巨大 的 影响 。 对 于 
数字 机 顶 盒 的 应 用 及 IPTV、WebTV 的 推广 提供 了 更 好 的 聚合 推送 业务 。 

个 性 化 引擎 的 建立 是 以 偏好 系统 为 基础 的 ,偏好 系统 的 建立 要 全 面 并 且 应 与 内 容 聚 合 
相 联系 。 有 了 一 定 的 偏好 分 析 , 才 能 建立 起 完善 的 个 性 化 引擎 。 
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(3) 有 效 和 有 序 的 数字 新 技术 

Web 3.0 将 建立 可 信 的 SNS(social networking services, 社 会 网 络 服务 系统 ) ,可 管理 
的 VoIP(voice over Internet protocol, 模 拟 声音 信号 数字 化 ) 与 IM(IMay 电子 竞技 俱 乐 
部 ), 可 控 的 Blog/Vlog/Wiki, 实 现 数字 通信 与 信息 处 理 、 网 络 与 计算 、 媒 体内 容 与 业务 智 
能 、 传 播 与 管理 、 艺 术 与 人 文 的 有 序 及 有 效 的 结合 和 融会 贯通 。 

Web 2.0 模式 下 的 SNS 一 一 网 络 社交 平台 ,只 是 简单 地 将 人 与 人 通过 互联 网 这 一 平台 
连接 起 来 。 通 过 互联 网 注册 在 SNS 的 平台 上 结交 朋友 ,无 法 确保 注册 信息 的 可 靠 性 和 有 效 
性 ,也 并 不 是 每 一 次 交际 圈 的 扩展 都 会 带 来 相应 的 利益 需求 ,这 一 过 程 进行 下 去 的 结果 将 会 
导致 本 身 信息 的 外 泄 和 零乱 、 不 可靠 信息 的 泛滥 ,颠覆 了 人 们 想 利用 互联 网 来 扩展 人 际 交往 
的 初衷 。 这 一 问题 在 Web 3. 0 模式 下 ,将 通过 对 用 户 的 真实 信息 的 核查 与 认证 的 方式 来 解 
决 。 高 可 信 度 的 信息 发 布 源 为 以 后 交际 圈 的 扩展 提供 了 可 靠 的 保障 ,与 此 同时 ,人 们 在 交际 
的 同时 ,也 可 以 更 迅速 地 找到 自己 需要 的 人 才 , 并 且 可 以 完全 信任 这 些 可 信 度 高 的 用 户 提供 
的 信息 ,利用 这 些 可 以 进一步 扩展 对 自己 有 利 的 交际 圈 。 

Web 3.0 模式 下 可 管理 的 VoIP 与 IM, 同样 为 互联 网 用 户 的 使 用 提供 了 方便 快捷 的 服 
务 方式 。 可 信 度 越 高 ,信用度 越 好 的 用 户 发 布 的 信息 越 会 被 自动 置顶 , 既 提高 了 信息 源 发 布 
者 的 可 信 度 ,同时 使 得 这 些 有 用 、 真 实 的 信息 更 快 地 出 现在 用 户 的 面前 ,从 而 发 挥 了 信息 的 
最 大 效力 ,提高 了 信息 的 使 用 率 、 降 低 了 查找 信息 的 时 间 损 耗 。 

Web 3.0 模式 下 可 控 的 Blog/ Vlog/Wiki, 同 样 也 是 为 了 提高 消息 的 利用 率 与 查找 信息 
的 便捷 性 而 产生 的 。 这 些 原本 在 Web 2. 0 模式 下 允许 用 户 随意 发 布 的 Blog/Vlog/ Wiki 会 
导致 网 络 上 堆积 大 量 杂 乱 无 章 的 信息 ,为 用 户 的 搜索 带 来 了 极 大 的 不 便 。 由 此 ,Web 3. 0 提 
出 了 “可 控 ” 这 一 概念 ,使 得 信息 的 发 布 与 使 用 连接 起 来 。 如 果 想 搜索 高 可 信 度 的 信息 ,可 以 
单 击 可 信 度 高 的 用 户 撰 写 的 Blog/Vlog/ Wiki, 实 现 可 信和 内容 与 用 户 访 问 的 对 接 。 

4。Web 3.0 的 前 景 

Web 3.0 化 整 为 零 , 用 户 可 以 根据 自己 的 喜好 设计 并 建立 属于 自己 的 网 页 。Web 3. 0 
可 以 通过 网 页 的 剪 切 及 粘贴 功能 ,将 自己 喜欢 的 页 面 剪 切 并 整理 在 一 起 ,删除 无 用 信息 ,而 
且 最 为 重要 的 一 点 是 所 剪 切 的 页 面 与 主 网 页 上 的 相关 信息 同步 更 新 ,不 存在 信息 的 滞后 性 ， 
大 大 提高 了 阅读 效率 。Web 3. 0 通过 网 页 和 相关 组 件 的 穿插 ,可 以 为 使 用 者 提供 更 为 有 效 
的 信息 资源 ,实现 数字 通信 与 信息 处 理 、 即 时 信息 、 交 友 娱 乐 、 传 播 与 管理 的 有 序 有 效 的 结 
合 。 目 前 已 知 的 相关 企业 有 : 百度 空间 、 冰 地 网 .天 盟 网 .新浪 博 客 .Google 等 。 


1.2.2 Web 新 技术 的 应 用 


当前 ,以 HTML 5 为 代表 的 新 一 代 Web 技术 正 处 于 技术 发 展 的 初期 。 由 于 众多 科技 
巨头 的 易 力 支持 ,以 及 其 自身 强大 的 技术 潜力 和 开放 性 ,新 一 代 Web 技术 已 经 得 到 了 业界 
的 高 度 关注 ,在 技术 发 展 和 应 用 方面 都 进展 顺利 ,被 认为 在 未 来 有 能 力 成 为 主导 移动 互联 网 
产业 发 展 的 关键 技术 。 可 以 预计 ,伴随 着 技术 功能 的 不 断 完善 以 及 标准 化 工作 的 顺利 推进 ， 
新 一 代 技 术 将 在 未 来 迎 来 高 速 发 展 。 

当前 全 球 主流 浏览 器 厂商 微软 谷歌. 苹果 、Mozilla 等 企业 都 对 以 HTML 5 为 代表 的 
新 一 代 Web 技术 的 发 展 给 予 了 全 面 支持 。 新 一 代 Web 技术 已 应 用 于 移动 终端 桌面 电视 
等 多 个 平台 ,初步 实现 了 跨 平台 的 快速 发 展 。 
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1. 移动 终端 

在 移动 终端 市 场 ,由 于 苹果 、 谷 歌 等 公司 先后 放弃 了 Flash 技术 转 而 支持 HTML 5 技 
术 , 推 动 了 新 一 代 Web 技术 在 该 领域 的 发 展 。 而 新 一 代 Web 技术 的 快速 加 载 . 本 地 /离线 
存储 和 地 理 位 置 获取 功能 也 使 得 相关 应 用 充分 地 发 挥 了 移动 设备 的 便捷 特性 ,受到 了 开发 
者 的 青睐 ,因此 未 来 的 发 展 前 景 十 分 广阔 。 

2. 桌面 应 用 

谷歌 的 Chrome 浏览 器 .苹果 的 Safari 浏览 器 和 Opera 浏览 器 一 直 对 HTML 5 有 非常 
出 色 的 支持 。 例 如 谷歌 联合 加 拿 大 著名 独立 播 滚 乐团 共同 推出 了 一 个 HTML 5 互动 电 
影 The Wilderness Downtown:, 页 面 上 的 动画 效果 缘由 HTML 5 技术 制作 ,效果 非常 令 人 
震撼 。 微 软 的 IE 10 浏览 器 对 HTML 5 的 支持 也 表现 良好 ,这 无 疑 加 速 了 HTML 5 的 
发 展 。 

3. 互联 网 电视 

GoogleTV 以 及 AppleTYV 都 已 支持 HTML 5。 互 联网 电视 领域 拥有 大 量 的 设备 终端 ， 
能 连接 计算 机 的 智能 电视 的 数量 正在 不 断 增长 。 

4。 跨 平台 的 Web 应 用 

Mozilla 将 推出 跨 平台 HTML 5 应 用 商店 , 它 利用 HTML 5 的 开源 性 ,构建 了 一 个 支 
持 PC、 手 机 和 平板 电脑 的 平台 ,用 户 不 管 使 用 何 种 设备 或 操作 系统 ,都 可 以 下 载 和 安装 自己 
喜欢 的 应 用 ,让 用 户 不 再 局 限于 一 个 特定 的 操作 系统 上 ,用 户 只 需 购 买 一 次 应 用 即 可 在 任何 
启用 HTML 5 的 设备 上 使 用 。 

5. 网 络 游戏 

HTML 5 网 络 游戏 最 大 的 优势 就 是 平台 的 兼容 性 ,能 够 同时 支持 Android iPhone 和 
Windows Phone。 腾 讯 旗 下 的 手机 QQ 游戏 大 厅 中 的 欢乐 斗 地 主 ,QQ 斗 地 主 等 ,是 国内 最 
早 的 HTML 5 游戏 开放 平台 之 一 。 


1.3 Web 前端 开发 


1.3.1 什么 是 Web 前 端 开 发 技术 


Web 前 端 技术 包括 三 个 主要 的 因素 : HTML、CSS、JavaScript。 这 三 者 之 间 虽 然 相 互 
存在 一 定 的 关联 性 ,但 是 在 实际 的 运用 过 程 中 都 具有 自身 的 特点 ,对 代码 质量 的 要 求 也 存在 
一 定 的 差异 性 。HTML 技术 可 以 对 超 文 本 的 结构 进行 一 定 的 探索 ,使 得 超 文本 语言 在 结构 
上 更 加 完整 ,将 一 些 过 时 的 标记 及 时 取消 ,内 容 和 形式 分 离 ,进行 技术 结构 的 改进 之 后 ,生成 
的 网 页 更 加 易于 管理 ,可 提升 用 户 的 体验 。CSS, 即 层 伙 样式 表 技 术 , 可 用 于 增强 网 页 样式 
的 控制 ,为 相关 的 信息 和 网 页 的 分 析 提 供 一 定 的 允许 条 件 ,是 一 种 标记 性 的 语言 。 这 项 技术 
的 发 展 可 以 促进 网 页 浏览 速度 的 提升 ,对 模块 的 维护 和 改善 也 具有 一 定 的 促进 作用 。 
JavaScript 技术 出 现 之 后 ,信息 和 用 户 之 间 的 关系 不 仅仅 是 显示 和 浏览 的 关系 ,同时 可 以 将 
实时 ,动态 的 数据 进行 一 定 的 表达 。JavaScript 可 以 和 HTML 技术 进行 结合 ,通过 其 在 文 
件 中 的 嵌入 ,将 不 需要 进行 整理 的 技术 进行 一 定 的 响应 ,使 得 网 页 可 以 更 好 地 与 客户 进行 分 
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析 ,而 不 需要 经 过 Web 技术 与 客户 进行 交流 ,从 而 减少 了 服务 器 的 压力 。 

随 着 RIA (rich Internet applications, 丰富 互联 网 程序 ) 的 流行 和 普及 ,Flash/Flex、 
Silverlight、XML 和 服务 器 端 语 言 也 成 了 前 端 开 发 的 重要 语言 。 随 着 时 代 的 发 展 , 前 端 开 发 
技术 的 三 要 素 也 演变 成 为 现今 的 HTML 5、CSS 3 和 jQuery。 


1.3.2 ”Web 前 端 开 发 工程 师 


Web 前 端 开发 工程 师 是 一 个 很 新 的 职业 ,在 国内 乃至 国际 上 真正 开始 受到 重视 的 时 间 
不 超过 10 年 。Web 前 端 开 发 是 从 网 页 制作 演变 而 来 的 ,名 称 上 有 很 明显 的 时 代 特 征 。 在 
互联 网 的 演化 进程 中 ,网 页 制作 是 Web 1.0 时 代 的 产物 , 那 时 网 站 的 主要 内 容 都 是 静态 的 ， 
用 户 使 用 网 站 的 行为 也 以 浏览 为 主 。 

2005 年 以 后 ,互联 网 进入 Web 2.0 时 代 , 各 种 类 似 桌 面 软件 的 Web 应 用 大 量 涌现 ,网 
站 的 前 端 由 此 发 生 了 翻天 覆 地 的 变化 。 网 页 不 再 只 是 承载 单一 的 文字 和 图 片 ,各 种 丰富 媒 
体 让 网 页 的 内 容 更 加 生动 ,网 页 上 软件 化 的 交互 形式 为 用 户 提 供 了 更 好 的 使 用 体验 ,这 些 都 
是 基于 前 端 技术 实现 的 。 

随 着 Web 2.0 概念 的 普及 和 W3C 组 织 的 推广 ,网 站 重 构 的 影响 力 正 以 惊人 的 速度 增 
长 。XHTML 十 CSS 布局 .DHTML 和 ajax 像 一 阵 旋风 ,铺天盖地 席卷 而 来 ,包括 新 浪 、 搜 
狐 、 网 易 、 腾 讯 、 阿 里 等 在 内 的 各 种 规模 的 IT 企业 都 对 自己 的 网 站 进行 了 重 构 。 前 端 开发 
的 入 门 门槛 其 实 非常 低 , 与 服务 器 端 语言 先 慢 后 快 的 学 习 曲 线 相 比 ,前 端 开发 的 学 习 曲 线 是 
先 快 后 慢 。 所 以 ,对 于 从 事 IT 工作 的 人 来 说 ,前 端 开发 是 个 不 错 的 切入 点 。 

1. Web 前 端 开发 工程 师 需 求 现状 

上 海 互 联网 紧缺 人 才 报 告发 布 Web 前 端 开发 工程 师 最 紧俏 ,人 民 网 上 海 2015 年 11 月 
13 日 电 ,《 上 海 互 联网 行业 人 才 紧 缺 指数 (TSI) 报告 》 显 示 , Web 前 端 开发 工程 师 已 成 为 上 
海 互联 网 行业 中 最 紧俏 的 职位 。 根 据 此 次 报告 ,2016 年 第 三 季度 ,互联 网 在 上 海 全 行业 中 
成 为 人 才 需 求 最 为 紧迫 的 行业 ;而 在 当地 互联 网 各 种 紧缺 职位 中 ,各 类 研发 技术 类 岗位 稳 居 
前 列 。 

人 才 紧 缺 指 数 (talent shortage index,TSI) 王 需求 岗位 数 /求职 人 数 。 课 工场 中 关 村 实 
训 基 地 TSI 大 于 1, 表 示人 才 供 不 应 求 ; 小 于 1, 表示 人 才 供 大 于 求 。 如 果 TSI 上 升 ,表示 人 
才 紧 缺 程度 加 剧 。 猎 聘 网 的 报告 指出 .上海 互联 网 TSI 高 达 2. 49, 在 上 海 所 有 行业 中 排名 
第 一 ,并 与 其 他 行业 拉 开 明显 的 差距 。 

上 海 互联 网 行业 自 2014 年 第 三 季度 以 来 ,始终 保持 着 较 高 的 TSI, 互 联网 人 才 严 重 供 

应 求 。 到 了 2015 年 三 季度 ,上 海 互联 网 TSI 达到 历史 新 高 ,高 达 2. 49 。 

在 上 海 互 联网 行业 的 细 分 职能 中 ,排名 前 十 的 绝 大 多 数 为 技术 性 岗位 ,其 中 Web 前 端 
开发 工程 师 最 为 紧俏 ,其 TSI 为 13. 03。TSI 仅 次 于 Web 前 端 开发 工程 师 的 是 软件 工程 
师 , 其 TSI 为 6.02, 环 比 增长 30. 13%。 

2. Web 前 端 开 发 工程 师 的 职业 要 求 

Web 前 端 开 发 工程 师 既 要 与 上 游 的 交互 设计 师 、 视 觉 设 计 师 和 产品 经 理 沟通 ,又 要 与 
下 游 的 服务 器 端 工 程 师 沟 通 , 需 要 掌握 的 技能 非常 多 。 这 就 从 知识 的 广度 上 对 Web 前 端 开 
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发 工程 师 提 出 了 要 求 。 如 果 要 精通 于 前 端 开发 这 一 行 ,也 许 要 先 精通 十 行 。 然 而 ,全 才 总 是 
少 有 的 。 所 以 ,对 于 不 太 重 要 的 知识 ,我 们 只 需要 “ 通 ” 即 可 。 但 “ 通 ” 到 什么 程度 才 算 够 用 
呢 ? 对 于 很 多 初级 前 端 开发 工程 师 来 说 ,这 个 问题 非常 令 人 迷惑 。 

一 位 好 的 Web 前 端 开发 工程 师 在 知识 体系 上 既 要 有 广度 ,又 要 有 深度 ,所 以 很 多 大 公 
司 即 使 出 高 薪 也 很 难 招聘 到 理想 的 前 端 开 发 工程 师 。 现 在 说 的 重点 不 在 于 讲解 技术 ,而 是 
更 侧重 于 对 技巧 的 讲解 。 技 术 非 黑 即 白 , 只 有 对 和 错 ,而 技巧 则 见仁见智 。 以 前 会 
Photoshop 和 Dreamweaver 就 可 以 制作 网 页 ,现在 只 掌握 这 些 已 经 远 远 不 够 了 。 无 论 是 开 
发 难度 上 还 是 开发 方式 上 ,现在 的 网 页 制作 都 更 接近 传统 的 网 站 后 台 开 发 ,所 以 现在 不 再 叫 
网 页 制作 ,而 是 叫 Web 前 端 开发 。Web 前 端 开发 在 产品 开发 环节 中 的 作用 变 得 越 来 越 重 
要 ,而 且 需 要 专业 的 前 端 工程 师 才 能 做 好 ,这 方面 的 专业 人 才 近 两 年 来 备 受 青睐 。Web 前 
端 开发 是 一 项 很 特殊 的 工作 ,涵盖 的 知识 面 非常 广 , 既 有 具体 的 技术 ,又 有 抽象 的 理念 。 简 
单 地 说 , 它 的 主要 职能 就 是 把 网 站 的 界面 更 好 地 呈现 给 用 户 。 

所 以 一 名 优秀 的 前 端 开发 工程 师 , 不 单单 需要 掌握 前 端 必需 的 各 种 技术 ,同时 还 要 掌握 
其 他 技术 ,需要 掌握 一 点 后 台 的 知识 ,同时 也 要 对 网 站 构架 有 一 定 的 了 解 ,同时 还 要 掌握 一 
定 的 SEO 网 站 优化 技术 ,这样 才 可 以 称 之 为 一 个 “优秀 的 Web 前 端 开发 工程 师 ”。 除 了 技 
术 以 外 ,还 需要 一 定 的 时 间 来 沉淀 自己 。 一 名 资深 的 优秀 Web 前 端 开发 工程 师 , 是 每 个 大 
型 企业 都 渴望 的 人 才 。 业 内 人 士 表示 ,宁可 高 薪 招 人 ,许多 企业 也 不 愿 自己 培养 相关 的 技术 
人 才 。 

如 何 才能 做 得 更 好 呢 ? 

第 一 ,必须 掌握 基本 的 Web 前 端 开 发 技术 ,其 中 包括 CSS、HTML,、SEO、DOM.、BOM.、 
ajax、JavaScript 等 ,在 掌握 这 些 技术 的 同时 ,还 要 清楚 地 了 解 它们 在 不 同 浏览 器 上 的 兼容 情 
况 、 泻 染 原 理 和 存在 的 Bug。 

第 二 ,在 一 名 合格 的 前 端 工程 师 的 知识 结构 中 ,网 站 性 能 优化 .SEO 和 服务 器 端的 基础 
知识 也 是 必须 要 掌握 的 。 

第 三 ,必须 学 会 运用 各 种 工具 进行 辅助 开发 。 

第 四 ,除了 要 掌握 技术 层面 的 知识 ,还 要 掌握 理论 层面 的 知识 ,包括 代码 的 可 维护 性 、 组 
件 的 易 用 性 、 分 层 语义 模板 和 浏览 器 分 级 支持 ,等 等 。 

可 见 , 看 似 简 单 的 网 页 制作 ,如 果 要 做 得 更 好 、 更 专业 , 真 的 并 不 简单 。 这 就 是 前 端 开发 
的 特点 ,也 是 让 很 多 人 困惑 的 原因 。 如 此 繁杂 的 知识 体系 让 新 手 学 习 起 来 无 从 下 手 ;对 于 老 
手 来 说 ,也 时 常 不 知道 下 一 步 该 学 什么 。 

代码 质量 是 前 端 开 发 中 应 该 重点 考虑 的 问题 之 一 。 例 如 ,实现 一 个 网 站 界面 可 能 会 有 
无 数 种 方案 ,但 有 些 方案 的 维护 成 本 会 比较 高 ,有 些 方案 会 存在 性 能 问题 ,而 有 些 方案 则 更 
易于 维护 , 而且 性 能 也 比较 好 。 这 里 的 关键 影响 因素 就 是 代码 质量 。CSS、HTML、 
JavaScript 这 三 种 前 端 开发 语言 的 特点 是 不 同 的 ,对 代码 质量 的 要 求 也 不 同 ,但 它们 之 间 又 
有 着 千 丝 万 缕 的 联系 。 
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1.4 Web 前 端 开发 工具 


优秀 的 工具 可 以 使 开发 者 的 开发 工作 事半功倍 ,创建 出 高 品质 的 Web 应 用 程序 。 本 节 
将 介绍 8 款 重要 的 Web 开发 工具 ,涵盖 CSS、JavaScript、 图 像 优 化 及 调试 的 Web 开发 工 
作 , 和 希望 对 开发 者 有 所 帮助 。 


1.4.1 CSS 工具 





1. Layer Styles 

如 果 不 想 去 记 新 的 CSS 3 特性 和 前 级 ,Layer Styles 可 帮 上 你 的 忙 ,该 工具 使 用 类 似 于 
Photoshop 图 层 样式 的 界面 ,让 你 轻松 配置 阴影 .背景 .边框 和 边界 半径 。 图 1-5 所 示 为 
Layer Styles 站 点 。 

网 址 : http://layerstyles. org/ 
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图 1-5 ”Layer Styles 站 点 


2. Bear CSS 

该 工具 可 以 根据 上 传 的 HTML 文档 ,采集 其 中 所 使 用 的 HTML 元 素 , 来 生成 CSS 模 
板 。Bear CSS 站 点 如 图 1-6 所 示 。 

网 址 : http://bearcss. com/ 





1.4.2 JavaScript 工具 


1. Bookmarkleter 
该 工具 可 以 将 你 的 JavaScript 代码 转换 成 一 个 小 书签 ,帮助 用 户 进行 代码 压缩 和 URL 
编码 。Bookmarkleter 工具 站 点 如 图 1-7 所 示 。 
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图 1-6 ”Bear CSS 站 点 


网 址 : https://chriszarate. github. io/bookmarkleter/ 
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1-7 Bookmarkleter 工具 站 点 


2. JSLint 

这 是 一 个 JavaScript 调试 工具 。 可 以 查找 代码 中 的 潜在 问题 ,并 返回 一 条 消息 ,告诉 用 
户 存 在 的 问题 以 及 出 现 的 位 置 。JSLint 工具 站 点 如 图 1-8 所 示 。 

网 址 : http://www. jslint. com/ 
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图 1-8 JSLint 工具 站 点 


1.4.3 图像 优 化 工具 


1. PunyPNG 


该 工具 可 以 大 大 降低 图 像 文件 的 大 小 , 且 没 有 任何 质量 损失 。PunyPNG 工具 站 点 如 


图 1-9 所 示 。 








| 





网 址 : http://conradchu. com/ 
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图 1-9 PunyPNG 工具 站 点 


2. SpriteMe 
该 了 





[ 具 以 一 种 不 同 的 方式 来 创建 CSS Sprites。 这 是 一 个 书签 ,可 以 检测 用 户 网 站 中 的 





像 , 并 相应 地 进行 CSS Sprites 的 操作 。SpriteMe 工具 站 点 如 图 1-10 所 示 。 


网 址 : http://spriteme. org/ 
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1-10 ”SpriteMe 工具 站 点 


1.4.4 开发 及 调试 工具 


1. WebStore 

WebStore 是 jetbrains 公司 旗下 的 一 款 JavaScript 开发 工具 ,被 广大 中 国 JavaScript 开 
发 者 誉 为 “Web 前 端 开发 神器 “最 强大 的 HTML 5 编辑 器 “最 智能 的 JavaScript IDE” 等 。 
与 Intelli] IDEA 同 源 , 继 承 了 Intelli] IDEA 强大 的 JavaScript 部 分 的 功能 。WebStore 工 
具 站 点 如 图 1-11 所 示 。 


网 址 : http://www. webstore. com/ 
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图 1-11 WebStore 工 具 站 点 
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2. Fiddler 

Fiddler 是 一 个 HTTP 协议 调试 代理 工具 , 它 能 够 记录 并 检查 计算 机 和 互联 网 之 间 的 
HTTP 通信 ,设置 断 点 ,查看 所 有 的 “进出 ”Fiddler 的 数据 ,包含 Cookie.HTML JS、CSS 等 
文件 ,这 些 数据 都 可 以 让 开发 者 在 调试 时 随意 修改 。Fiddler 比 其 他 的 网 络 调 试 器 更 加 简 
单 ,因为 它 不 仅仅 暴露 HTTP 通信 ,还 提供 了 一 个 用 户 友好 的 格式 。Fiddler 工具 站 点 如 
图 1-12 所 示 。 


网 址 : http://www. telerik. com/fiddler 











Telerikv amow 


Fiddler 


The fre: debugging proxy 
for any browser, system or platform 








Love Fiddler? Join the Insiders Program to help shape Fiddler roadmap. Sign up 


图 1-12 Fiddler 工具 站 点 


本 章 小 结 


本 章 简 述 了 Web 的 基础 知识 ,包括 Web 的 发 展 、Web 特点 及 架构 、Web 3.0 及 新 技术 
的 应 用 情况 ;本 章 还 Lh 了 Web 前 端 开发 的 相关 知识 Web 前 端 开发 工程 师 的 职业 要 求 ; 
最 后 向 读者 推荐 了 8 款 Web 前 端 开发 工具 ,包括 CSS 工具 、JavaScript 工具 、 图 像 优 化 工具 
和 开发 及 调试 工具 。 为 读者 学 习 后 续 的 Web 知识 ,进行 Web 设计 、 开 发 和 应 用 提供 了 基础 
的 概念 和 思路 。 
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2.1 HTML 基础 


2.1.1 HTML 编写 规范 


HTML(HyperText Markup Language, 超 文本 标记 语言 ) 是 用 来 制作 网 页 的 一 种 规范 
和 标准 。HTML 文件 对 于 很 多 平台 具有 很 好 的 兼容 性 ,可 以 通过 网 页 浏览 器 在 任何 平台 上 
运行 并 显示 。 

HTML 文件 只 是 一 个 纯 文 本 文件 。 所 谓 的 “ 超 文本 ,是 针对 用 HTML 制作 的 网 页 
页 面 来 说 的 。 通 过 HTML 制作 的 网 页 页 面 内 容 可 以 包含 图 片 .链接 .音频 .视频 等 非 文 
本 元 素 。HTML 文档 其 实 是 一 种 静态 的 网 页 文件 ,里 面包 含 了 HTML 的 指令 代码 ,通过 
浏览 器 的 编译 和 解释 将 页 面 中 的 内 容 按 一 定 的 排版 位 置 显示 出 来 。 类 似 于 传统 的 报纸 
杂志 ,然而 这 些 纸 质 的 媒体 展示 不 出 声音 和 视频 ,但 网 页 可 以 。HTML 并 不 是 一 种 程序 
设计 语言 , 它 只 是 一 种 排版 网 页 中 资料 显示 位 置 的 标记 结构 语言 ,因此 我 们 称 它 为 超 文 
本 标记 语言 。 

HTML 的 指令 代码 是 由 标签 组 成 的 。 标 签 是 由 “二 ”和 “二 ”符号 以 及 标签 名 和 属性 表 
示 , 其 表示 方式 为 “一 标签 名 属性 之 ”>。HTML 的 标签 只 有 两 种 类 型 , 即 单 标签 和 双 标 签 。 

1. 单 标签 

单 标签 只 有 一 对 “二 "二" 符号 ,表示 形式 为 “二 标签 名 属性 三 参数 二 ”。 最 常见 的 单 标 
签 有 强制 换行 一 BR 二 水平线 一 HR 二 表单 中 的 文本 框 二 INPUT 二 > 等。 在 HTML 中 , 单 
标签 可 以 表示 为 二 标签 名 二 ,但 在 XHTML 中 ,表示 为 二 标签 名 /全 ,必须 使 用 /符号 正 
确 地 关闭 标签 。 

2. 双 标 签 

顾名思义 , 双 标 签 则 由 两 对 “二 ”二 ”符号 组 成 ,后 一 对 的 “二 ”符号 换 成 了 “二 /*” 符 号 , 表 
示 形 式 为 “二 标签 名 属性 = 参数 二 … 所 /标签 名 之 ”, 其 中 省 略 号 部 分 为 在 网 页 页 面 中 显示 
的 内 容 , 网 页 内 容 不 能 写 在 任何 标签 的 “二 ”二 ”符号 内 部 。 双 标签 中 “二 /标签 名 二 ”被 称 为 
结尾 标签 。 结 尾 标签 只 能 为 “二 /标签 名 二 ”的 形式 ,里 面 不 能 包含 任何 属性 。 值 得 注意 的 
是 : 在 HTML 文档 中 大 多 数 采 用 的 是 双 标 签 的 形式 。 

需要 说 明 的 是 ,HTML 的 标签 名 不 区 分 大 小 写 , 即 二 HTML 放 和 二 html 放 表示 效果 是 
一 样 的 。 
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2.1.2 HTML 基本 结构 
HTML 文档 的 基本 结构 由 标签 组 成 。 


<html> 

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 无 标题 文档 < /title> 

</head> 





<body> 
</body> 
</html> 


HTML 文档 的 基本 结构 包括 以 下 几 种 标签 。 

1. HTML 文件 标签 

过 HTML 之 和 过/HTML 盖 标签 表示 该 文档 为 HTML 网 页 文档 。 氨 HTML 之 标签 放 
在 文档 的 开头 , 壹 /HTML 二 放 在 文档 的 末尾 。 网 页 的 内 容 和 其 他 标签 都 典 套 在 这 对 标签 
之 内 。 

2. HEAD 文件 头 标签 

所 HEAD 字 和 所 /HEAD> 标 签 表示 文档 的 头 部 标签 ,用 来 描述 文档 的 有 关 信 息 ,如 文 
档 的 标题 ,作者 .采用 的 编码 .关键 词 等 。 文 档 头 部 标签 中 的 内 容 不 会 显示 在 浏览 器 的 显示 
区 域 , 主 要 提供 给 搜索 引擎 收录 时 使 用 。 

(1) title 标签 

title 标签 是 一 种 双 标 签 。 王 TITLE 二 和 < 一 /TITLE> 标 签 之 间 的 内 容 表 示 该 文档 的 标 
题 ,显示 在 浏览 器 的 标题 栏 中 。title 标签 只 能 用 于 HTML 文档 的 头 部 二 HEAD 二 标签 中 ， 
且 一 个 文档 中 只 能 有 一 个 标题 。 

(2) meta 标签 

所 meta 一 标签 是 一 种 单 标签 。 它 提供 有 关 页 面 的 元 信息 Cmeta-information) , 比如 针对 
搜索 引擎 和 更 新 频 度 的 描述 和 关键 词 。 二 meta 二 标签 位 于 文档 的 头 部 标签 中 。 由 于 是 单 
标签 ,不 包含 任何 内 容 , 二 meta 二 标签 的 属性 是 定义 与 文档 相关 联 的 名 称 / 值 对 。 

二 meta 二 标签 常用 的 属性 有 content、http-equiv、name、scheme、charset, 属 性 的 值 与 描 
述 请 参考 表 2-1。 

表 2-1 一 meta 二 标签 的 属性 
属 性 值 描 述 


content some_text 定义 与 http-equiv 或 name 属性 相关 的 元 信息 








content-type 





expires 
http-equiv 把 content 属性 关联 到 http 头 部 


refresh 








set-cookie 
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author 





description 





keywords 
name 把 content 属性 关联 到 一 个 名 称 


generator 








revised 





others 


scheme Some_text 定义 用 于 翻译 content 属性 值 的 格式 








gb2312 
charset 定义 文档 使 用 的 编码 
utf-8 











3. BODY 文件 主体 标签 
二 body 之 和 二 /body 二 标签 为 HTML 文档 的 主体 标签 。 网 页 中 需要 显示 的 所 有 内 容 
都 必须 包含 在 这 对 标签 之 间 。 


2.1.3 查看 HTML 文件 


HTML 文件 可 以 直接 通过 浏览 器 解释 展示 出 网 页 的 内 容 。 查 看 HTML 文件 的 代码 有 
多 种 方式 ,常用 的 有 使 用 编辑 工具 查看 和 直接 通过 在 浏览 器 的 显示 区 域 右 击 并 选择 “查看 页 
面 源 代码 ”命令 来 进行 查看 。 在 网 页 的 调试 过 程 中 ,我 们 还 常 通过 浏览 器 的 开发 调试 (快捷 
键 为 F12) 查 看 源 代码 。 


2.2 HTML 标 俭 


2.2.1 文字 与 段落 


文本 在 网 页 中 的 应 用 是 很 重要 的 。 文 本 是 网 页 中 最 基本 的 元 素 之 一 ,也 是 浏览 者 通过 
网 络 获取 信息 的 一 种 最 主要 的 方式 之 一 。 网 页 中 常见 的 文本 标签 有 标题 标签 .段落 标签 和 
其 他 的 一 些 为 了 展示 特殊 文本 格式 的 常用 标签 。 

1. 标题 文字 标签 

网 页 的 内 容 页 中 通常 用 一 篇 文章 来 描述 信息 ,该 信息 一 定 存在 标题 ,有 可 能 还 有 多 个 标 
题 。 因 此 网 页 中 提供 了 标题 标签 来 表达 网 页 中 的 标题 。 所 谓 标题 文字 就 是 以 某 种 固定 的 字 
号 显示 的 文字 。 标 题 文字 包含 6 种 层级 ,分 别 用 标签 hl 一 h6 来 描述 ,从 1 级 到 6 级 依次 
减 小 。 

【 例 2-1】 标题 文字 。 


< IDOCTYPE html PUBLIC "—//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. 
org/TR/xhtml1/DTD/xhtmll- transitional .dtd"> 
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程序 的 运行 结果 如 图 2-1 所 示 。 


|€ De/ wet cea 三 


1 级 标题 文字 





图 2-1 标题 文字 


2. 段落 文字 标签 

段落 文字 在 页 面 内 容 中 也 是 经 常用 到 的 。 在 HTML 页 面 中 ,段落 是 通过 一 p 二 标签 来 
表示 的 。 段 落 标签 是 双 标 签 ,在 使 用 时 最 好 采用 成 对 的 一 p 二 标签 来 包含 段落 。 

【 例 2-2】 段落 文字 。 
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<body> 
<p> 段 落 文字 在 页 面 内 容 中 也 是 最 常用 到 的 。 在 HTML 页 面 中 ,段落 是 通过 p 标签 来 表示 的 。 
段落 标签 是 双 标签 ,在 使 用 时 最 好 采用 成 对 的 pp 标签 来 包含 段落 。< /p> 

</body> 

</html> 


程序 的 运行 结果 如 图 2-2 所 示 。 





3. 其 他 常用 文字 标签 
除 标 题 标签 和 段落 标签 外 ,页 面 内 容 还 有 很 多 格式 需要 展现 。 因 此 ,HTML 还 提供 了 
一 些 其 他 的 常用 文字 标签 ,如 表 2-2 所 示 。 


图 2-2 段落 文字 























表 2-2 其 他 常用 的 文字 标签 

标 签 语 法 描 述 
b <b>...</b> 字体 加 粗 

strong 一 strong 二 .… 一 /strong 二 “| 字体 加 强 

em <em>...</em> 文字 强调 

i <i>...</i> 斜体 

sub <sub>...</sub> 下 标 

sup <=sup>...=/sup> 上 标 

del <del>...</del> 删除 线 





span 

















span>...</span> 





其 他 任何 文字 标签 都 不 适用 ,但 又 要 在 使 用 特殊 文字 格式 
时 用 到 


由 于 以 上 除 span 标签 外 的 其 他 文字 标签 所 展现 出 来 的 文字 格式 都 可 以 通过 样式 设置 


来 完成 ,因此 ,在 HTML 5 中 ,这 些 标签 都 被 取缔 ,而 通过 样式 设置 来 实现 特殊 的 文字 格式 。 
4. 转 义 字符 
HTML 页 面 所 使 用 的 标签 是 一 些 带 有 “一 ” 放 ” 尖 括号 的 普通 字符 ,如 果 页 面 内 容 中 需 

要 显示 出 尖 括 号 或 带 有 尖 括 号 的 字符 :浏览 器 则 会 将 这 些 带 有 尖 括 号 的 符号 识别 为 HTML 

的 标签 ,不 会 显示 在 页 面 内 容 中 。 因 此 .HTML 提供 了 一 些 转 义 字符 来 表达 这 些 特殊 字符 ， 
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见 表 2-3。 
表 2-3 转 义 字符 

特殊 字符 转 义 码 特殊 字符 转 义 码 
空格 &.nbsp; &. 符号 &amp; 
双 引 号 (" ") Rdquot 于 符号 Byens 
单 引 号 (" 7) Raposs 乘 号 (X) &-times; 
小 于 (一 ) i 除 号 (二 ) Bdivide; 
大 于 (二 ) Rgts 已 注册 商标 ( ) Bregs 
版 权 号 ( ) Rcopy; 











在 HTML 中 , 转 义 字符 的 编码 是 以 “&.” 符 号 开始 ,以 “;” 符 号 结束 ,中 间 为 相关 转 义 字 
符 的 编码 。“&.”" 和 *;" 符 号 是 不 可 省 略 的 。 

页 面 中 的 空格 符号 也 是 需要 转 义 字符 来 实现 的 。 文 字 换 行 也 需要 换行 标签 二 br 二 , 直 
接 通过 文字 的 换行 排版 是 行 不 通 的 。 


2.2.2 图 片 与 超 链接 


除 文字 外 ,图 片 也 是 网 页 中 最 重要 的 元 素 之 一 。 合 理 使 用 图 片 可 以 使 网 页 增添 不 少 色 
彩 。 网 页 支持 多 种 图 片 格式 ,可 以 是 GIF JPEG .PNG、BMP 等 格式 。 其 中 GIF 和 JPEG 格 
式 是 网 页 中 最 常用 的 。 近 年 来 具有 不 失真 且 支 持 透 明 的 PNG 格式 图 片 也 经 常用 在 网 页 
中 ,特别 是 移动 端的 网 页 应 用 最 为 广泛 。 
1. 插入 图 片 
网 页 中 使 用 图 片 有 两 种 形式 ,一 种 是 在 网 页 中 直接 插入 图 片 ; 另 一 种 是 将 图 片 作为 背景 
样式 设置 在 网 页 中 。 网 页 中 插入 图 片 使 用 二 img 二 标签 ( 见 表 2-4)。 二 img 二 标签 是 单 标 
签 , 仅 使 用 该 标签 并 不 能 将 图 片 插入 网 页 中 ,必须 要 有 图 片 来 源 的 标签 属性 src。 

表 2-4 二 img 二 标签 的 属性 及 描述 























属 性 值 描 述 
Src URL 将 要 插入 图 片 的 URL 
width pixels 设置 图 片 的 宽度 
height pixels 设置 图 片 的 高 度 
alt text 图 片 无 法 正常 显示 时 代替 图 片 显示 的 文字 
title text 鼠标 放 图 片上 时 显示 的 有 关 文 本 描述 








src 属性 用 于 指定 图 片 源 文件 的 路 径 , 它 是 二 img 二 标签 必 不 可 少 的 属性 ,使 图 片 显示 
在 网 页 中 。 
【 例 2-3】〗 插入 图 片 。 























< IDOCTYPE html PUBLIC "—//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. 
org/TR/xhtml1/DTD/xhtml1l- transitional .dtd"> 
<html xmlns="http://www.w3.0rg/1999/xhtml"> 
<head> 
<meta http-equiv= "Content-TYPe" content="text/html; charset=utf-8" /> 
<title> 插 和 人 图 片 </title> 
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</head> 


<body> 
<img src="images/hua.jpg" width="240" height="170" title=" 鲜 花 " alt=" 美 丽 的 
花 末 " /> 

</body> 

</html> 


程序 的 运行 结果 如 图 2-3 所 示 。 














图 2-3 插入 图 片 (正常 显示 ) 


去 img 标签 中 的 src 属性 指定 了 图 片 源 的 路 径 , width 属性 指定 图 片 在 网 页 中 的 显示 
宽度 ,height 属性 指定 图 片 在 网 页 中 的 显示 高 度 ,title 属性 是 鼠标 光标 移 到 网 页 中 显示 图 片 
上 时 所 展示 出 来 的 文本 描述 ,alt 属性 是 图 片 在 浏览 器 中 无 法 正常 显示 时 代替 图 片 所 显示 的 
文本 信息 ,如 图 2-4 所 示 。 





| © fle///Ey/ (Wet cl» 1 


| 美丽 的 花 朱 











图 2-4 插入 图 片 (不 能 正常 显示 图 片 ) 
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2. 超 链 接 

Web 上 的 网 页 都 是 互相 链接 的 ,通过 点 击 一 个 页 面 上 的 超 链接 可 以 进入 其 他 页 面 。 

网 页 中 超 链接 是 通过 二 a 二 标签 ( 见 表 2-5) 完 成 的 。 二 a 二 标签 是 双 标 签 。 在 成 对 的 
二 a 标 签 之 间 的 内 容 即 为 网 页 上 所 显示 的 可 单 击 的 超 链接 对 象 ,该 对 象 可 以 是 文字 ,也 可 
以 是 图 片 。 与 二 img 放 标签 类 似 , 超 链 接 也 不 仅仅 是 通过 二 a 二 标签 实现 的 ,必须 要 有 链接 
的 目标 属性 href。 


表 2-5 一 a 二 标签 的 属性 及 描述 

















属 性 值 描 述 

href URL 超 链接 目标 文件 的 URL 
_blank 
_parent 

target el 链接 目标 的 窗口 打开 方式 
_top 








href 属性 指定 超 链接 将 要 链接 到 的 目标 文件 的 路 径 , target 属性 指定 链接 目标 的 窗口 
打开 方式 。 在 使 用 二 a 二 标签 时 ,target 属性 可 以 省 略 , 省 略 时 链接 将 在 当前 窗口 打开 。 若 
要 在 新 的 浏览 器 窗口 中 打开 链接 ,target 属性 值 设置 为 : target 二 "_blank"。 由 于 HTML 5 
已 经 取消 了 框架 集 ({rameset) ,所 以 target 的 其 他 三 个 属性 值 (target=="_parent"、target 二 
"_self" \target 一 "_top") 也 基本 没有 用 。 

【 例 2-4】 文字 和 图 片 超 链接 。 





< IDOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. 
org/TR/xhtmll/DTD/xhtmll- transitional .dtd"> 

<html xmlns="http://www.w3.0rg/1999/xhtml"> 

<head> 


<meta http-equiv="Content- Type" content="text/html; charset=utf-8" /> 
<title> 文 字 和 图 片 超 链接 < /title> 
</head> 


<body> 
<a href=" 例 2-2.html" target=" blank"> 文 字 链 接 < /a> 
<a href=" 例 2-3.html"><img src="images/hua.jpg" width="240" height="170" /> 
</a> 

</body> 

</html> 


程序 的 运行 结果 如 图 2-5 所 示 。 

超 链接 二 a 二 标签 的 href 属性 指向 链接 的 目标 文件 ,而 链接 的 目标 文件 可 以 是 各 种 类 
型 的 文件 。 超 链接 不 仅 可 以 链接 到 图 片 文件 .声音 文件 .视频 文件 .Word 文档 等 ,还 可 以 链 
接 到 其 他 网 站 、FTP 服务 器 .电子 邮件 等 。 


及 
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2.2.3 列表 标签 


列表 标签 也 是 网 页 中 常用 的 标签 。 列 表 可 以 有 序 地 对 信息 资源 进行 排版 ,使 页 面 结 构 
具有 条 理性 。HTML 提供 了 无 序列 表 、 有 序列 表 和 定义 列表 三 种 列表 标签 。 

1. 无 序列 表 

无 序列 表 就 像 是 Word 中 的 项 目 符号 ,列表 项 没有 排列 顺序 ,只 有 列表 项 目 符号 。 无 序 
列表 用 一 对 二 ul 二 二 /ul 二 标签 表示 ,列表 项 用 一 对 二 li 二 二 /li 二 标签 表示 。 项 目 符号 则 用 
三 ul 二 标签 的 type 属性 表示 。 

无 序列 表 二 ul 二 的 type 属性 见 表 2-6。 

表 2-6 无 序列 表 一 ul 二 的 type 属性 











属 性 值 描 述 
disc( 默 认 值 ) ( 
square 国 
circle O 





在 一 个 无 序列 表 中 可 以 包含 多 个 列表 项 ,列表 项 的 结尾 标记 二 /li 二 可 以 省 略 ,但 为 了 
结构 的 完整 性 ,最 好 不 要 省 略 。 列 表 项 中 可 以 嵌 套 列表 。 
【 例 2-5】 无 序列 表 。 


< IDOCTYPE html] PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. 
org/TR/xhtmll1/DTD/xhtmll- transitional .dtd"> 
<html xmlns="http://www.w3.0rg/1999/xhtml"> 
<head> 
<meta http-equiv="Content- Type" content="text/html; charset=utf-8" /> 
<title> 无 序列 表 < /title> 
</head> 
<body> 
<ul> 
<1i> 一 级 标题 </1i> 
<1i> 一 级 标题 </1i> 
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<1i> 一 级 标题 
<ul> 
<1i> 二 级 标题 </1i> 
<1i> 二 级 标题 </1i> 
<1i> 二 级 标题 </1i> 
</ul> 
</li> 
<1i> 一 级 标题 </1i> 
<1i> 一 级 标题 </1i> 
<1i> 一 级 标题 </1i> 
</ul> 
</body> 
</html> 


程序 的 运行 结果 如 图 2-6 所 示 。 





过 加 filey//E/ 《Web 前 沪 : © ||Q Bs -Corpk> 








图 2-6 无 序列 表 


嵌 套 列表 在 未 设置 项 目 符号 时 ,会 默认 以 另 一 种 符号 显示 。 


2. 有 序列 表 


有 序列 表 类 似 于 Word 中 的 编号 列表 ,列表 项 按照 一 定 的 顺序 排列 。 有 序列 表 采 用 一 
对 一 ol 二 二 /ol 二 标签 表示 ,列表 项 依然 采用 一 对 一 li 二 二 /li 二 标签 表示 ,但 列表 项 具有 一 定 


的 顺序 。 列 表 项 符号 通过 type 属性 设置 ,如 表 2-7 所 示 。 


表 2-7 ”有 序列 表 一 ol 二 的 type 属性 











属性 值 描 述 属性 值 描 述 
1 数字 (默认 ) 大 写 罗 马 数字 
A 大 写字 母 i 小 写 罗 马 数 字 
a 小 写字 母 











有 序列 表 项 中 也 可 以 嵌 套 列表 , 嵌 套 的 列表 可 以 是 有 序列 表 , 也 可 以 是 无 序列 表 。 有 序 
列表 的 列表 符号 从 前 到 后 依次 排序 .默认 情况 下 都 是 从 1 开始 。 如 果 第 一 个 列表 项 的 项 目 


符号 不 从 1 开始 , 则 使 用 start 属性 设置 。 然 而 start 属性 的 





属性 值 只 能 是 数字 "1,2,3,…”。 


如 果 第 一 个 列表 项 符号 从 “F” 开 始 , 并 不 是 将 start 属性 值 设置 为 : start 二 "F", 而 是 将 start 
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属性 值 设 置 为 : start 一 "6"。 
【 例 2-6】 有 序列 表 。 





程序 的 运行 结果 如 图 2-7 所 示 。 





图 2-7 有 序列 表 
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3. 定义 列表 

定义 列表 用 来 展示 术语 及 其 解释 。 定 义 列表 用 一 对 二 dl 二 二 /dl 二 标签 表示 ,列表 项 中 
的 术语 用 二 dt 二 二 /dt 二 标签 表示 ,列表 项 中 的 解释 用 二 dd 放 二 /dd 二 标签 表示 。 术 语 和 人 解 
释 都 各 占 一 行 ,术语 顶 格 显示 ,解释 则 换行 缩 进 显示 。 

【 例 2-7】 定义 列表 。 





程序 的 运行 结果 如 图 2-8 所 示 。 








图 2-8 定义 列表 


定义 列表 中 的 列表 项 “术语 ”" 和 "解释 "并 不 一 定 要 交替 列 示 ,可 以 连续 出 现 多 对 二 dt 二 
二 /dt 二 标签 ,也 可 以 连续 出 现 多 对 二 dd 二 二 /dd 二 标签 ,还 可 以 交替 出 现 。 
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2.2.4 表格 标签 


在 HTML 中 创建 表格 的 语法 是 完全 按照 表格 的 自然 构成 来 组 织 的 。 

1. 创建 表格 

在 Word 或 者 Excel 中 的 表格 具有 行 和 列 , 在 网 页 中 表格 同样 具有 行 和 列 。 在 HTML 
文档 中 创建 表格 时 ,首先 需要 确定 创建 几 行 几 列 的 表格 ,然后 才 开 始 创 建 。 因 此 ,表格 由 三 
个 基本 元 素 组 成 : table 元 素 ,tr 元 素 、td 元 素 。 

(1) table 元 素 : 用 来 定义 表格 ,整个 表格 包含 在 二 table 之 和 二 /table> 标 签 中 。 

(2) tr 元 素 : 用 来 定义 表格 中 的 行 。 一 对 过 tr 之 和 二 /tr 二 标签 表示 表格 中 的 一 行 。 它 
也 是 单元 格 容 器 ,一 行 中 可 以 包含 若干 个 单元 格 。 

(3) td 元素 : 表格 的 列 标记 ,也 是 表格 的 单元 格 , 包 含 在 表格 的 行 标记 二 tr 之 中 。 每 个 
单元 格 用 一 对 二 td 二 和 二 /td 二 标签 表示 。 

(4) th 元素: 有 时 候 会 看 到 表格 中 存在 th 元素, 其 实 它 跟 td 元 素 一 样 也 可 以 表示 表格 
的 单元 格 , 所 不 同 的 是 , 它 可 以 用 来 创建 表格 的 头 信息 单元 格 , 俗 称 表 头 元 素 ,一 般 用 在 表格 
的 第 一 行 或 者 第 一 列 。 表 头 元 素 从 样式 上 看 ,其 实 就 是 对 单元 格 内 的 文字 进行 了 加 粗 设置 。 
因此 ,在 使 用 表格 时 不 常用 表 头 元 素 , 而 直接 采用 单元 格 td 元 素 ,只 需要 设置 样式 来 达到 表 
头 的 显示 效果 。 

(5) caption 元 素 : 表格 的 标题 标签 。 通 过 它 可 以 对 创建 表格 的 目的 和 作用 进行 一 个 简 
单 的 说 明 。caption 元 素 内 的 内 容 即 为 该 表格 的 标题 。caption 元 素 只 能 被 定义 在 table 元 
素 的 开始 标签 之 后 ,tr 元 素 之 前 ,并 且 一 个 表格 即 一 个 table 元 素 中 仅 能 定义 一 个 caption 
元 素 。 

表格 在 网 页 中 的 结构 表现 与 自然 结构 是 相同 的 ,具有 行 和 列 。 因 此 表格 的 基本 结构 
如 下 : 








<table> 
<tr> 
<th> &nbsp;< /th> 
<th> gnbsp;</th> 
/Er 
xr 
<td> &nbsp;</td> 
<td> &nbsp;< /td> 
</tr> 
</table> 


表格 二 table 二 标签 中 包含 行 二 tr 二 标签 ,在 行 标签 中 包含 列 一 td 二 标签 。 

2. 单元 格 的 合并 与 拆 分 

(1) 横向 合并 单元 格 

横向 合并 单元 格 就 是 将 一 行 中 的 几 个 单元 格 进 行 合 并 ,合并 的 是 单元 格 的 列 数 ,用 
colspan 属性 来 进行 设置 ,相应 的 这 一 行 中 的 单元 格 个 数 对 应 减少 。 属 性 值 是 一 个 数字 , 表 
示 合 并 的 单元 格 的 个 数 。 
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(2) 纵向 合并 单元 格 

纵向 上 的 单元 格 合并 是 将 同一 列 中 的 几 个 单元 格 进行 合并 ,合并 的 是 这 一 列 单 元 格 的 
行 数 ,用 rowspan 属性 来 进行 设置 ,相应 的 其 他 行 中 的 单元 格 个 数 对 应 减少 。 它 的 属性 值 
也 是 一 个 数字 ,表示 合并 的 单元 格 的 个 数 。 

在 我 们 对 单元 格 合 并 的 实际 应 用 中 ,并 不 一 定 只 有 横向 的 合并 或 者 只 有 纵向 的 合并 ,有 
时 候 既 有 横向 的 合并 ,也 有 纵向 的 合并 ,即将 相 邻 的 多 行 多 列 单元 格 进行 合并 。 合 并 后 的 单 
元 格 中 既 有 colspan 属性 ,也 有 rowspan 属性 。 

(3) 单元 格 的 拆 分 

一 个 单元 格 可 以 拆 分 成 多 个 单元 格 。 单 元 格 拆 分 时 可 以 拆 分 成 多 行 ,也 可 以 拆 分 成 多 
列 , 但 是 一 次 拆 分 只 能 操作 一 个 单元 格 ,并 且 一 次 拆 分 要 么 拆 分 成 多 行 ,要 么 拆 分 成 多 列 ,不 
能 一 次 操作 既 有 多 行 又 有 多 列 的 拆 分 。 既 有 多 行 又 有 多 列 的 拆 分 可 以 分 多 次 进行 。 

单元 格 的 拆 分 ,其 实质 是 将 其 他 相关 的 单元 格 进行 合并 操作 。 如 : 将 一 行 中 的 一 个 单 
元 格 拆 分 成 两 行 的 两 个 单元 格 ,而 这 一 行 中 其 他 的 所 有 单元 格 ,都 在 纵向 上 合并 了 两 个 单元 
格 ,分 别 增 加 了 rowspan 王 "2" 的 属性 ,并 且 表格 会 增加 一 行 , 即 多 了 一 对 二 tr 二 标签 ,一 tr 二 
标签 中 只 有 一 对 二 td 二 标签 。 

3. 表格 的 府 套 

表格 可 以 用 来 布局 网 页 ,但 是 网 页 的 栏目 板块 有 时 候 是 以 不 规则 形式 展现 的 。 因 此 ,要 
用 标准 的 表格 去 布局 不 规则 的 网 页 栏目 时 ,会 采用 一 定 的 表格 嵌 套 来 完成 。 

表格 的 嵌 套 就 是 在 建立 的 表格 中 的 某 一 个 单元 格 当中 ,再 创建 一 个 表格 。 











<table width="600" border="1"> 
<tr> 
<td width="150" height="200">&nbsp;</td> 
<td width="150" height="200">&nbsp;</td> 
<td width="150" height="200">&nbsp;</td> 
<td width="150" height="200">&nbsp;< /td> 
</tr> 
<tr> 
<td height="100" colspan="4"><table width="100%" border="1"> 
<tr> 
<td width="200" height="200"> gnbsp;</td> 
<td width="200" height="200"> &nbsp;</td> 
<td width="200" height="200"> gnbsp;</td> 
</tr> 
</td> 
</tr> 
</table> 


表格 的 嵌 套 常用 在 网 页 的 布局 中 。 


2.2.5 表单 标签 


HTML 表单 通常 在 网 页 中 表现 为 注册 、 登 录 页 面 ,调查 信息 表 、 订 单 页 面 以 及 一 些 搜索 
界面 等 。 这 些 页 面 主要 是 用 来 搜集 用 户 信息 ,并 且 将 这 些 收集 来 的 信息 发 送 到 服务 器 端 进 
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行 处 理 。 


因此 ,表单 是 客户 端 与 服务 器 端 传 递 数据 的 桥梁 ,也 是 用 户 与 服务 器 之 间 实 现 相互 


交互 的 最 主要 的 方式 。 

1. 创建 表单 

网 页 中 的 表单 用 二 form 之 二 /form 二 标签 进行 创建 。 表 单 标签 是 双 标签 ,用 一 对 标签 
分 别 定 义 表单 的 开始 位 置 和 结束 位 置 ,在 标签 对 之 间 创 建 表单 控件 。 在 表单 的 开始 标签 
到 form> 中 ,可 以 设置 表单 的 基本 属性 ,包括 表单 的 名 称 name 属性 ,处 理 表单 数据 的 目标 
程序 action 属性 以 及 传送 数据 的 方法 method 属性 等 。 表 单 二 form 二 标签 相当 于 是 表单 的 
容器 ,里 面 除了 包含 表单 控件 外 ,还 可 以 包含 其 他 的 文本 元 素 ,如 段落 .列表 等 。 表 单 标签 中 
常用 的 属性 如 表 2-8 所 示 。 








表 2-8 表单 标签 中 常用 的 属性 











属 性 描 述 

name 用 来 设置 表单 的 名 称 

action 设 定 表单 数据 处 理 程序 URL 的 地 址 
method 用 来 定义 数据 传递 到 服务 器 的 方式 





表单 标签 中 的 method 属性 如 表 2-9 所 示 。 


属性 值 


表 2-9 表单 标签 中 的 method 属性 
描 述 





get 


将 表单 中 的 数据 加 在 action 指定 的 地 址 后 面 并 传送 到 服务 器 中 ,即将 表单 控件 中 的 输入 
数据 按照 HTTP 传输 协议 中 的 GET 传输 方式 传送 到 服务 器 端 。 这 种 方式 传送 的 字段 
小 ,安全 性 低 





Post 


将 表单 中 所 有 控件 的 输入 数据 按照 HTTP 传输 协议 中 的 POST 传输 方式 传送 到 服务 器 
中 。 这 种 传输 方式 传送 的 字段 大 ,安全 性 高 





Put 


将 输入 数据 按照 HTTP 传输 协议 中 的 PUT 传输 方式 传送 到 服务 器 中 





delete 


将 输入 数据 按照 HTTP 传输 协议 中 的 DELETE 传输 方式 传送 到 服务 器 中 





2. 表单 控件 


用 户 


与 表单 交互 是 通过 表单 的 控件 进行 的 。 表 单 控件 通过 name 属性 进行 标识 ,通过 


value 属性 值 获取 输入 数据 。 表 单 的 “提交 ”是 通过 表单 的 “提交 ”按钮 完成 的 。 


表单 


控件 中 ,input 元 素 可 以 定义 表单 中 的 大 部 分 的 控件 ,控件 的 类 型 由 type 属性 ( 见 


表 2-10) 决 定 ,不 同 的 值 对 应 不 同类 型 的 表单 控件 。 


表 2-10 input 元 素 的 type 属性 




















属 性 控件 的 类 型 说 明 
text( 默 认 ) 表示 单行 输入 文本 框 
password 表示 密码 框 ,输入 的 数据 用 星 号 显示 
radio 表示 单 选 框 
checkbox 表示 复 选 框 
file 表示 文件 域 .由 一 个 单行 文本 框 和 一 个 “浏览 ”按钮 组 成 
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续 表 
属 性 控件 的 类 型 说 明 
submit 表示 “提交 ”按钮 ,将 表单 数据 发 送 到 服务 器 
reset 表示 “ 重 置 " 按 钮 ,将 重 置 表单 中 的 数据 ,以 便 重新 输入 
button 表示 普通 按钮 ,应 用 value 的 属性 值 定义 按钮 上 显示 的 文字 
image 表示 一 个 图 像 按钮 
hidden 表示 隐藏 文本 框 








除了 type 属性 ,input 元 素 还 有 以 下 一 些 常用 的 属性 。 

(1) name 属性 : 为 表单 控件 定义 一 个 名 称 标识 ,这 个 名 称 将 与 控件 的 当前 值 组 成 *&. 
名 称 二 值 " 对 ,并 一 同 随 着 表单 数据 进行 提交 。 

(2) value 属性 : 用 于 指定 初始 值 , 即 默认 的 显示 值 。 当 文本 框 中 没有 输入 信息 时 ,在 
网 页 中 显示 出 来 的 是 初始 值 。 它 是 可 选 的 ,可 以 不 设置 。 但 是 value 属性 非常 重要 ,因为 它 
的 值 将 会 被 发 送 到 服务 器 ,即使 是 单 选 框 或 复 选 框 ,最 好 都 设置 好 value 属性 ,这 样 提交 数 
据 时 也 可 以 将 单 选 按钮 和 复 选 框 中 用 户 所 选择 的 信息 提交 出 去 。 

(3) size 属性 : 设置 表单 控件 的 初始 宽度 , 值 是 以 字符 的 个 数 为 单位 。 

(4) checked 属性 : 这 个 属性 只 针对 单 选 按钮 和 复 选 框 进行 设置 。 它 是 一 个 多 辑 值 , 指 
定单 选 按钮 或 复 选 框 是 否 处 于 选中 状态 。 当 表单 控件 ( 单 选 按钮 或 复 选 框 ) 中 设置 该 属性 
时 ,表示 该 选择 框 被 选中 ; 没有 设置 则 表示 该 选择 框 没有 被 选中 。checked 属性 只 用 于 单 选 
按钮 和 复 选 框 , 且 只 有 一 个 属性 值 checked 。 

(5) maxlength 属性 : 指定 表单 控件 中 可 以 输入 的 最 大 字符 数 ,数值 可 以 超过 size 属性 
设置 的 数值 。 该 属性 常用 于 单行 输入 文本 框 和 密码 框 。 如 果 控 件 中 不 设置 该 属性 ,表示 该 
控件 对 输入 的 字符 数 没有 限制 。 

(6) src 属性 : 只 针对 type= "image" 的 图 像 按钮 ,用 来 设置 图 像 文件 的 路 径 。 

还 可 以 设置 readonly 属性 ,用 于 在 文本 框 中 显示 文本 ,而 不 能 输入 数据 。 


2.2.6 注释 标签 


网 页 稍 大 一 些 , 结 构 就 会 显得 复杂 。 在 HTML 源 代码 中 适当 加 入 注释 语句 ,能 够 使 网 
页 结构 代码 更 清晰 ,更 具有 可 读 性 ,这 也 是 设计 者 编写 代码 的 一 种 好 习惯 ,便于 以 后 修改 。 
另外 ,其 他 的 设计 者 拿 到 具有 注释 的 源 代码 也 很 容易 上 手 。 

所 谓 注释 ,是 在 HTML 代码 中 插入 用 来 解释 或 提示 性 的 描述 信息 文本 。 注 释 语句 只 
出 现在 代码 中 ,浏览 器 不 会 对 注释 代码 进行 解释 从 而 显示 在 浏览 器 的 展示 区 域 。 

HTML 中 的 注释 标签 为 “所 !- 注 释 的 内 容 - 字 ”可 以 注释 一 行 或 多 行 代码 ,而 且 可 以 
注释 HTML 代码 。 只 要 将 要 注释 的 代码 放 在 "一 !- ”和 "一 > 之 间 , 这 些 代码 就 不 会 在 浏览 
器 中 显示 出 来 。 

【 例 2-8】 注释 标签 。 








< IDOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. 
org/TR/xhtmll1/DTD/xhtmll- transitional .dtd"> 
<html xmlns= "http://www.w3-org/1999/xhtmln> 
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程序 的 运行 结果 如 图 2-9 所 示 。 





图 2-9 注释 标签 


源 代码 中 被 注释 的 代码 不 会 在 浏览 器 中 显示 。 


2.3 XHTML 基础 


2.3.1 XHTML 简介 


XHTML(eXtensible HyperText Markup Language, 可 扩展 的 超 文 本 标记 语言 ) 是 一 个 
基于 XML 的 标记 语言 ,是 为 取代 HTML 而 存在 的 。XHTML 是 一 种 过 渡 技 术 ,XHTML 1.0 
是 一 种 在 HTML 4.0 基础 上 优化 和 改进 的 新 语言 ,目的 是 基于 XML 应 用 。XHTML 是 一 
种 增强 了 的 HTML,XHTML 是 更 严谨 ,更 纯净 的 HTML 版 本 。 它 的 可 扩展 性 和 灵活 性 
将 适应 未 来 网 络 应 用 更 多 的 需求 。XHTML 1. 0 Transitional 版 本 与 HTML 4. 01 几乎 是 
相同 的 。 


2.3.2 XHTML 语法 


XHTML 比 HTML 更 简洁 ,语法 也 更 严谨。 本 书 所 制作 的 HTML 页 面 所 使 用 的 便 是 
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XHTML 1.0 Transitional 版 本 。 

XHTML 遵循 以 下 几 点 语法 规则 。 

(1) XHTML 标签 的 属性 名 称 必须 小 写 。 

(2) XHTML 属性 值 必须 加 引号 。 

(3) XHTML 属性 不 能 简写 。 如 表单 控件 二 input 二 标签 的 checked 属性 ,不 能 写成 
一 input checked 放 ,必须 要 写成 二 input checked 一 "checked" 二 ,这样 才 是 正确 的 。 

(4) 用 id 属性 代替 name 属性 。 

(5) XHTML DTD 定义 了 强制 使 用 的 HTML 元 素 。 所 有 XHTML 文档 必须 进行 文 
件 类 型 声明 (doctype declaration)。 在 XHTML 文档 中 必须 存在 html、head、body 元素 ,而 
title 元 素 必 须 位 于 head 元 素 中 。 但 文件 类 型 声明 并 非 XHTML 文档 自身 的 组 成 部 分 , 它 
并 不 是 XHTML 元 素 , 也 没有 关闭 标签。 

以 下 代码 是 Dreamweaver 新 建 的 一 个 XHTML 文件 结构 。 





< IDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. 

org/TR/xhtmll/DTD/xhtmll- transitional .dtd"> 

<html xmlns="http://www.w3.0rg/1999/xhtml"> 

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 无 标题 文档 < /title> 

</head> 

<body> 

</body> 

</html> 


在 XHTML 中 :一 html 二 标签 内 的 xmlns 属性 是 必需 的 。 然 而 ,即使 当 XHTML 文档 
中 没有 这 个 属性 时 ,w3. org 的 验证 工具 也 不 会 提示 错误 。 这 是 因为 xmlns 是 一 个 固定 的 
值 ,即使 没有 把 它 包 含 在 代码 中 ,这 个 值 也 会 被 添加 到 二 html 二 标签 中 。 


2.3.3 XHTML 与 HTML 的 区 别 


HTML 和 XHTML 的 区 别 简单 来 说 ,可 以 认为 XHTML 是 XML 版 本 的 HTML ,为 
了 符合 XML 的 要 求 ,XHTML 语法 上 要 求 更 严谨 。 

(1) XHTML 所 有 的 标签 都 必须 要 有 相应 的 结尾 标签 。 在 HTML 中 ,二 1i 一 标签 可 以 
不 用 关闭 , 即 不 用 二 /Mi 一 标签 也 是 可 以 的 ,但 在 XHTML 中 ,必须 要 有 严谨 的 结构 ,所 有 标 
签 必 须 关闭 ,否则 是 不 合法 的 。 例 如 单 标签 ,在 标签 结束 的 右 尖 括号 前 也 必须 加 上 “”"/ 来 
关闭 。 

(2) XHTML 的 标签 名 是 区 分 大 小 写 的 。 

(3) 所 有 的 XHTML 标签 都 必须 合理 嵌 套 。 因 为 XHTML 要 求 有 严谨 的 结构 ,因此 所 
有 的 典 套 都 必须 按 顺 序 , 如 二 p 二 一 b 二 二 /b 二 二 /p 二 这 样 的 嵌 套 是 正确 的 ,然而 如 果 写 成 
二 bp 二 一 b> 二 /p> 二 /b>, 则 是 不 正确 的 。 合 理 的 嵌 套 必须 是 严格 对 称 的 。 

(4) 所 有 的 属性 必须 用 引号 ("") 括 起 来 。 

(5) 所 有 二 和 & 等 特殊 符号 用 转 义 码 表示 。 

任何 小 于 号 (二 ) 如 果 不 是 标签 的 一 部 分 .都 必须 使 用 转 义 码 “&lt;”; 任 何 大 于 号 (二 ) 
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如 果 不 是 标签 的 一 部 分 ,都 必须 使 用 转 义 码 “&gt;”, 任 何 “ 与 ”号 (&) 如 果 不 是 实体 的 一 部 
分 的 ,都 必须 使 用 转 义 码 *&.amp;” 

(6) XHTML 的 所 有 属性 不 能 简写 。 XHTML 规定 所 有 属性 都 必须 有 一 个 值 ,没有 值 
就 重复 本 身 。 例 如 ,一 input type 一 "checkbox"”checked 一 "checked" 二。 

(7) XHTML 不 能 在 注释 内 容 中 使 用 "一 ”符号 。“ 一 "只 能 写 在 XHTML 注释 的 开头 和 
结尾 ,不 能 出 现在 内 容 的 中 间 。 例 如 下 面 的 代码 是 无 效 的 :“ 志 !-- 这 里 是 注释 一 一 一 一 这 里 
是 注释 - 盖 ”。 但 用 等 号 或 者 空格 替换 内 部 的 虚线 :“ 志 !- 这 里 是 注释 二 二 一 一 一 一 一 一 一 
二 二 二 这 里 是 注释 -之 ”, 这 样 写 就 是 合法 的 。 

(8) XHTML 中 搬入 的 图 片 必须 要 有 说 明文 字 。 每 个 图 片 标签 都 必须 有 alt 属性 来 表 
述说 明文 字 。 比 如 : 一 img src 王 "ball. jpg" alt 王 "large red ball" title 王 "large red ball" /二 。 
为 了 兼容 火狐 和 IE 浏览 器 ,对 于 图 片 标签 ,尽量 采用 alt 和 title 双 属 性 ,单纯 的 alt 属性 在 
火狐 下 没有 图 片 说 明 。 


至 











2.4 HTML 5 


2.4.1 HTML 5 文档 结构 


HTML 从 版 本 1.0 到 版 本 5.0 发 生 了 巨大 的 变化 ,也 做 出 了 很 大 的 改进 。 尤 其 是 
HTML 5 对 多 媒体 的 支持 更 加 强大 。HTML 5 新 增 了 离线 存储 、 新 的 文档 对 象 模 型 、 跨 文 
档 消息 等 功能 ,因此 ,HTML 5 的 应 用 越 来 越 广泛 ,更 多 地 应 用 于 移动 端的 网 页 。 

HTML 5 的 文档 结构 与 HTML 的 文档 结构 类 似 ,包括 文档 开始 、 结 束 的 标签 ,文档 的 
头 部 标签 ,文档 的 主体 标签 。HTML 5 文档 的 基本 结构 如 下 : 


<!doctype html> 

<html> 

<head> 
<meta charset="utf- 8"> 
<title> 无 标题 文档 < /title> 

</head> 

<body> 

</body> 

</html> 


从 以 上 的 结构 代码 中 可 以 看 出 ,HTML 5 的 结构 代码 比 以 前 的 版 本 都 简洁 。 结 构 代 码 
中 的 标签 都 是 前 面 介绍 过 的 ,这 里 就 不 缆 述 了 。 


2.4.2 HTML 5 新 增 的 结构 标签 及 属性 


为 了 适应 浏览 器 的 多 样 性 ,HTML 5 中 新 增 了 一 些 结构 标签 和 属性 ,以 及 取缔 了 一 些 
没 多 大 作用 的 标签 和 属性 ,下 面 详细 进行 介绍 。 

1. HTML s 新 增 的 标签 

HTML 5 中 新 增 的 结构 标签 及 描述 如 表 2-11 所 示 。 
38 





第 2 章 HTML 标记 语言 





表 2-11 HTML 5 中 新 增 的 结构 标签 及 描述 







































































结构 标签 描 述 
定义 文档 或 应 用 程序 中 的 一 个 区 段 , 如 章节 、 页 眉 、 页 脚 等 。 可 以 配合 标题 标签 使 用 , 标 
section 
识 文 档 结 构 
article 定义 文档 中 的 一 块 独立 内 容 , 如 博客 或 报纸 中 的 一 篇 文章 
header 定义 页 面 中 的 一 个 内 容 区 块 或 整个 页 面 的 标题 
nav 定义 页 面 中 的 导航 
footer 定义 页 面 中 的 一 个 内 容 区 块 的 脚注 ,一 般 包含 版 权 信 息 
aside 定义 页 面 中 的 侧 边 栏目 ,一 般 是 与 article 相关 的 内 容 
figure 定义 文档 主体 流 内 容 中 的 一 个 独立 单元 ,类 似 于 文章 中 的 二 级 主体 内 容 
dialog 定义 对 话 , 如 交谈 。 标 签 里 面 可 以 使 用 定义 列表 项 二 dt 和 二 dd 一 标签 
行内 元 素 ,在 视觉 上 呈现 需要 突出 显示 或 高 亮 显示 的 文字 ,如 在 搜索 结果 中 高 亮 显示 搜 
mark 1 
索 关 键 词 
time 行内 元 素 , 定 义 日 期 或 时 间 
meter 行内 元 素 , 定 义 已 知 最 大 值 和 最 小 值 的 度量 项 。 必 须 定义 独立 的 范围 
Progress 定义 运行 中 的 进程 。 可 以 用 来 显示 JavaScript 中 耗费 时 间 的 函数 的 进程 
audio 定义 页 面 中 插入 的 音频 文件 。 
video 定义 页 面 中 插入 的 视频 文件 。 
定义 用 户 要 求 得 到 并 且 可 以 得 到 的 细节 信息 ,与 summary 标签 配合 使 用 。summary 标 
jetails 签 是 标题 或 图 例 且 是 details 标签 中 的 第 一 个 子 标签 ,在 浏览 器 中 可 见 。 单 击 标题 或 图 
例 时 ,就 会 显示 出 details 里 的 内 容 。 如 : 一 derails> 二 summary 二 标题 一 /summary 二 
单 击 标题 才 可 见 的 内 容 二 /details 二 
datagrid 定义 可 选 数据 的 列表 ,通常 用 于 显示 树 列表 
menu 定义 菜单 列表 ,通常 用 于 列 出 表单 控件 。 其 中 的 列表 项 用 二 i> 标签 定义 
定义 命令 按钮 ,如 单 选 框 , 复 选 框 或 普通 按钮 。 例 如 : 二 command onclick 一 "cut()" 
command 
label="cut"> 


除 command 标签 外 ,其 他 新 增 的 标签 都 是 双 标签 。 
2. HTML 5s 被 取缔 的 标签 
HTML 5 被 取缔 的 标签 及 描述 见 表 2-12 。 
表 2-12 HTML 5 被 取缔 的 标签 及 描述 
类 型 取缔 的 标签 





basefont ,big ,center font\s \strike ,tt\u 这 些 标签 的 功能 都 可 以 通过 CSS 样 


能 使 用 CSS 代替 的 标签 式 的 设置 来 实现 





HTML 5 只 支持 iframe 框架 或 服务 器 方 创建 的 由 多 个 页 面 组 成 的 复合 页 


不 再 使 用 frame 框架 面 .因此 ,frameset、frame 和 noframes 这 3 个 标签 被 取缔 





applet、bgsound .blink .marquee 这些 标签 只 有 部 分 浏览 器 支持 ,在 HTML 5 
中 被 取缔 。applet 被 embed 标签 代替 .bgsound 被 audio 标签 代替 ,marquee 
可 以 由 JavaScript 程序 实现 


只 有 部 分 浏览 器 支持 的 
标签 





3. HTML 5 新 增 的 属性 
HTML 5 中 新 增 的 属性 主要 以 表单 属性 为 主 .还 有 链接 的 相关 属性 ( 见 表 2-13) 及 其 他 
39 


交互 式 Web 前 端 开发 实践 








属性 ( 见 表 2-14)。 新 增 的 表单 属性 将 在 后 面 的 HTML 5 表单 中 进行 介绍 。 


属 性 


表 2-13 新 增 的 与 链接 相关 的 属性 
描 述 





media 


为 二 a 二 与 二 area 二 标签 增加 的 属性 。 规 定 目 标 URL 是 以 什么 类 型 的 媒介 进行 优化 
的 。 该 属性 只 能 在 href 属性 存在 时 使 用 





hreflang/ rel 


为 二 area 二 标签 增加 的 属性 ,保持 与 二 a 二 标签 和 二 link> 标 签 的 一 致 





Sizes 





为 二 link 盖 标签 增加 的 属性 ,可 以 与 二 icon 二 标签 结合 使 用 ,指定 关联 图 标 ( 志 icon 二 
标签 ) 的 大 小 

















为 二 base 二 标签 增加 的 属性 ,主要 是 保持 与 二 a 二 标签 的 一 致 。target 属性 在 与 




















eS iframe 结合 使 用 时 非常 有 用 
表 2-14 HTML 5 新 增 的 其 他 属性 
属 性 描 述 
reversed 为 二 ol 二 标签 增加 的 属性 ,指定 列表 倒序 显示 
charset 为 二 meta 二 标签 增加 的 属性 ,指定 文档 的 字符 编码 
type 为 二 menu 二 标签 增加 的 两 个 属性 。label 属性 为 菜单 定义 了 一 个 可 见 的 标注 ,type 属 
label 性 使 菜单 有 3 种 形式 : 上 下 文 菜单 .工具 条 和 列表 菜单 
Sobel 为 二 style 二 标签 增加 的 属性 ,规定 样式 的 作用 范围 。 为 二 script 二 标签 增加 了 aync 属 
有 性 ,定义 脚本 是 否 异步 执行 
ee 为 二 html 二 标签 增加 的 属性 ,开发 离线 Web 应 用 程序 时 与 API 结合 使 用 ,定义 一 个 
URL, 在 这 个 URIL 上 描述 了 文档 的 缓存 信息 
sandbox a ee pa 站 i 这 i pe 
a 为 二 iframe 二 标签 增加 的 3 个 属性 ,用 来 提高 页 面 的 安全 性 ,防止 不 信任 的 Web 页 面 
srcdoc 执行 某 些 操作 





对 于 HTML 5 新 增 的 功能 .各 个 浏览 器 的 支持 程度 不 一 致 ,主要 是 以 新 出 的 高 版 本 浏 
览 器 为 主 。IE 9 及 以 上 的 版 本 支持 HTML 5 的 浏览 ,本 书 则 以 火狐 浏览 器 作为 案例 的 


展示 。 


4. HTML 5 中 被 取消 的 属性 
HTML 5 中 取消 了 一 部 分 以 往 版 本 中 常用 的 属性 ,主要 以 能 被 其 他 的 标签 或 样式 设置 


所 代替 的 为 3 





EE ,如 align、bgcolor、text、valign 等 属性 。 


2.4.3 HTML 5 音 视 频 


在 以 往 的 网 页 中 要 播放 音 视频 .浏览 器 都 必须 要 安装 相应 的 插件 才能 够 播放 ,但 是 并 不 
是 所 有 的 浏览 器 都 有 相应 的 插件 。 因 此 ,与 HTML 4 相 比 ,HTML 5 新 增 了 音频 标签 和 视 
频 标签 ,规定 了 一 种 包含 音 视 频 的 标准 方法 ,不 需要 浏览 器 再 安装 其 他 相应 的 插件 。 


1. 音频 标签 


二 audio 二 二 /audio 二 标签 是 HTML 5 中 新 增 的 标签 ,用 来 播放 声音 文件 。 支 持 三 种 音 
频 格 式 : ogg 、mp3 和 wav。 
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如 果 要 在 HTML 5 页 面 中 播放 音频 ,需要 使 用 二 audio 盖 标签 的 src 属性 指定 要 插入 音 
频 文件 的 源 目标 地 址 。 二 audio 二 标签 的 常用 属性 及 描述 见 表 2-15 。 


表 2-15 二 audio 一 标签 的 常用 属性 及 描述 




















属 性 值 描 述 
sre URL 目标 音频 文件 的 地 址 
autoplay autoplay( 自动 播放 ) 音频 就 绪 后 马上 播放 
controls controls( 控 制 ) 提供 添加 播放 ,暂停 和 音量 的 控件 

loop loop( 循 环 ) 音频 重复 播放 

preload preload( 加 载 ) 音频 在 页 面 加 载 时 进行 加 载 ,并 预备 播放 

e 确定 在 显示 网 页 时 播放 文件 是 由 浏览 器 自动 缓冲 的 ,还 

autobuffer autobuffer( 自动 缓冲 ) 是 由 用 户 使 用 相关 API 进行 缓冲 











二 audio 记 标签 还 可 以 通过 source 属性 添加 多 个 音频 文件 。 在 一 audio 二 与 一 /audio 二 
之 间 插 入 的 内 容 是 提供 给 不 支持 二 audio 二 标签 的 浏览 器 显示 的 。 
【 例 2-9】 音频 标签 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf- 8"> 
<title> 添 加 音频 文件 < /title> 
</head> 


<body> 
<audio controls="controls"> 
</audio> 

</body> 

</html> 


程序 的 运行 结果 如 图 2-10 所 示 。 





图 2-10 音频 标签 


2. 视频 标签 
去 video> 标 签 是 用 来 定义 播放 视频 文件 的 ,支持 三 种 视频 格式 : ogg、mp4 和 WebM。 
与 audio 二 标签 的 用 法 一 致 ,可 以 通过 source 属性 添加 多 个 视频 文件 。 在 二 video 二 与 
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二 /video 二 之 间 插 入 的 内 容 是 为 不 支持 二 video 记 标签 的 浏览 器 显示 的 。 二 video 二 标签 的 
常用 属性 及 描述 见 表 2-16。 


表 2-16 一 video 二 标签 的 常用 属性 及 描述 






































属 性 值 描 述 
src URL 目标 视频 文件 的 地 址 
autoplay autoplay( 自 动 播放 ) | 视频 就 绪 后 马上 播放 
controls controls( 控 制 ) 提供 添加 播放 ,暂停 和 音量 的 控件 
loop loop( 循 环 ) 视频 重复 播放 
视频 在 页 面 加 载 时 进行 加 载 ,并 预备 播放 。 如 果 使 用 autoplay， 
| preload( 加 载 ) 站 帮 汪 因 训 
width 宽度 值 设置 视频 播放 器 的 宽度 
height 高 度 值 设置 视频 播放 器 的 高 度 
当 视频 未 响应 或 缓冲 不 足 时 ,该 属性 值 链接 到 一 个 图 像 。 该 图 
Poster url 像 将 以 一 定 比 例 显示 








由 于 二 video 过 标签 与 二 audio 二 标签 用 法 一 致 ,这 里 就 不 再 举例 了 。 
2.4.4 HTML S 表单 

在 Web 应 用 中 ,经 常会 用 到 表单 来 设计 登录 或 注册 页 面 。 在 HTML 5 中 ,表单 的 功能 
得 到 了 加 强 ,增加 了 一 些 属性 及 表单 控件 的 类 型 ,使 表单 的 开发 更 快捷 、 更 方便 。 

1. 新 增 的 表单 控件 

在 HTML 5 中 新 增 了 一 些 表单 的 控件 ,主要 是 二 input 之 标签 中 type 属性 值 ( 即 输入 类 
型 ) 的 增加 。 如 表 2-17 所 示 , 列 出 了 HTML 5 中 新 增 的 表单 控件 。 

表 2-17 一 input 二 标签 新 增 的 输入 类 型 









































输入 类 型 描 述 

color 调 色 板 控件 ,呈现 为 单行 文本 框 ,提供 了 一 个 颜色 选择 器 
date 日 期 控件 

datetime 日 期 和 时 间 控 件 

datetime-local 本 地 日 期 和 时 间 控 件 

time 时 间 控 件 

month 月 份 控件 

week 星期 控件 

range 滑动 刻度 控件 

search 搜索 文本 框 , 一 般 在 文本 框 中 显示 一 个 关闭 符号 

tel 单行 文本 框 ,用 来 输入 电话 号 码 的 文本 框 

email 一 个 单行 文本 框 ,呈现 电子 邮件 

url 单行 文本 框 ,用 来 输入 一 个 完整 的 URL 地 址 ,包括 传输 协议 
number 表现 为 一 个 单行 文本 框 ,或 带 步 进 按钮 





这 些 输入 类 型 全 部 都 是 二 input 二 标签 中 的 type 属性 值 , 且 都 是 HTML 5 中 新 增 的 输 
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人 类 型 。 对 于 这 些 新 增 的 表单 控件 ,不 管 浏览 器 支持 与 否 都 可 以 使 用 。 如 果 浏 览 器 不 支持 ， 
则 会 直接 忽略 ,不 会 报错 。 

(1) color 输入 类 型 

该 控件 用 于 设置 一 个 颜色 的 选择 框 ,. 如 :二 input type 一 "color" name 一 "user_color" 二 。 
在 Firefox 浏览 器 中 显示 出 一 个 具有 默认 值 为 #000000” 的 黑色 颜色 框 , 当 单 击 这 个 颜色 
选择 框 后 ,弹出 一 个 颜色 选择 器 ,如 图 2-11 所 示 。 用 户 可 以 在 颜色 选择 器 中 选择 自己 需要 
的 颜色 。 在 不 支持 该 输入 类 型 的 浏览 器 中 则 会 被 忽略 ,形成 一 个 普通 的 单行 文本 输入 框 。 





色调 吕 ): 160 红 0): 0 


协和 度 5)- 0 绊 @); 0 
蔬 色 | 邱 色 外 ) 夷 度 0J- 0 ”车 0): 0 
添加 到 自 定义 天 色 A) 





























图 2-11 color 输入 类 型 在 火狐 浏览 器 中 的 显示 效果 


这 里 的 颜色 是 用 一 个 RGB 的 颜色 值 表示 的 颜色 。 
(2) 日 期 和 时 间 控 件 
HTML 5 中 提供 了 多 种 选择 日 期 和 时 间 的 输入 类 型 ,用 于 验证 输入 的 日 期 。 


date: 用 于 选取 年 月 .日 。 如 二 input type 一 "date"” name 一 "user_date" 二 。 
datetime: 用 于 选取 UTC 时 间 , 包 括 年 .月 .日 .小 时 和 分 钟 。 如 所 input type 王 
"datetime"”name 一 "user_datetime" 二 。 但 在 浏览 器 显示 该 类 型 的 日 期 输入 类 型 时 ， 
呈现 出 的 是 一 个 单行 文本 输入 框 , 并 不 能 选择 日 期 ,而且 也 不 对 日 期 格式 进行 验证 。 
datetime-local: 用 于 选取 本 地 时 间 , 包 括 年 .月 .日 .小 时 和 分 钟 。 如 二 input type 一 
"datetime-local" name= "datetime_local">。 

time: 用 于 选取 时 间 .小 时 和 分 钟 。 如 二 input type 王 "time"” name 二 "user_time" 祖 。 
month: 用 于 选取 年 和 月 。 如 一 input type 一 "month"”name 一 "user_month" 二 。 
week: 用 于 选取 年 和 第 几 周 。 如 一 input type 一 "week"”name 一 "user_week" 二 。 


日 期 选择 器 所 涉及 的 这 几 种 选取 日 期 的 输入 类 型 ,在 Chrome 浏览 器 中 的 显示 效果 如 





图 2-12 所 示 。 


在 Firefox 浏览 器 中 则 会 被 忽略 ,形成 普通 的 单行 文本 输入 框 ,如 图 2-13 所 示 。 
其 中 可 以 选择 月 和 日 的 日 期 类 型 的 输入 框 ,虽然 会 验证 日 期 的 格式 ,但 是 不 会 验证 日 期 
的 准确 性 ,也 就 是 不 会 判断 月 份 的 大 小 月 以 及 二 月 是 否 是 疼 月 ,所 有 的 月 份 都 是 31 天 。 每 
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了》 C | @O filey//E/ (交互 式 web 靖 油 开 发 实 吐 》/ 第 二 章 / 例 2-10 从 | ; 


colcor 输 入 类 型 ， 国有 
date 输 入 类 型 ，| 年 /月 /日 


datetime 输 , 
datetime-local 输 入 类 型 ，| 年 /月 /日 一 :一 























Fp 


i : 
2016 年 11 月 ~ 四 加 | 对 


周 | 局 日 局- 周二 周三 周 四 局 五 局 六 
30 3 1 3 4 5 
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| 27 29[30]4 2 3 

















2-12 日 期 和 时 间 控 件 在 Chrome 浏览 器 中 的 显示 效果 











2-13 日 期 和 时 间 控 件 在 火狐 浏览 器 中 的 显示 效果 


个 能 够 选取 日 期 类 型 的 输入 框 右 侧 都 具有 一 个 删除 图 标 按钮 ,一 个 附带 步 进 按钮 ,一 个 单 击 
后 会 弹出 日 期 选择 项 的 下 拉 框 图 标 。 选 取 的 日 期 可 以 通过 “删除 图 标 ” 按 钮 删除 ,也 可 以 通 
过 步 进 按钮 选择 或 者 通过 下 拉 框 中 的 日 期 控件 选择 。 

(3) range 输入 类 型 

用 于 设 定 一 定 范围 内 的 数字 值 ,通常 表现 为 一 个 滑动 条 。 可 以 用 min 属性 设置 最 小 
值 ,用 max 属性 设置 最 大 值 。 如 二 input type 一 "range”name 一 "price”min 一 "10”max 一 
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呈 





"20" 二 。 在 Firefox 浏览 器 中 的 显示 效果 如 图 2-14 
所 示 。 

当 拖 动 滑 块 到 一 个 位 置 后 ,提交 表单 ,提交 的 数据 。 图 ”1 Tenge 输入 类 型 在 火狐 
中 会 显示 出 所 抢 动 滑 块 拖 动 到 的 位 置 数值 。 

(4) search 输入 类 型 

用 于 设 定 搜索 框 ,如 关键 词 搜 索 二 input type 王 "search”name 一 "key_words" 二 ,search 
类 型 显示 出 一 个 单行 文本 框 的 形式 。 在 Firefox 浏览 器 中 显示 的 搜索 框 与 普通 的 文本 输入 
框 无 异 , 如 要 查看 显示 效果 ,请 查看 并 运行 例 2-10 以 观 效果 。 

(5) tel 输入 类 型 

用 于 定义 一 个 电话 号 码 的 输入 框 , 当 鼠标 光标 移 到 输入 框 上 面 会 显示 一 个 信息 提示 框 。 
但 是 电话 号 码 的 形式 多 种 多 样 , 很 难 有 一 个 固定 的 模式 。 因 此 ,仅仅 用 tel 类 型 来 定义 电话 
号 码 是 无 法 实现 的 ,通常 与 pattern 属性 结合 使 用 ,利用 pattern 属性 的 正则 表达 式 来 规定 
电话 号 码 的 格式 。 如 二 input type 一 "tel"”name 王 "phone_number"”pattern 一 "^\d{11)$ "二 定 
义 了 一 个 必须 具有 11 位 数字 的 手机 号 码 输 入 框 , 当 格式 不 正确 时 ,输入 框 的 边框 会 显示 为 
红色 ,如 图 2-15 所 示 。 

(6) email 输入 类 型 

用 于 设置 一 个 输入 邮箱 地 址 的 输入 框 , 当 鼠标 光标 移 到 输入 框 上 面 会 显示 一 个 信息 提 
示 框 。 如 二 input type 二 "email" name 二 "user_email" 记 >。 当 在 设置 为 email 类 型 的 输入 框 
中 输入 一 个 不 是 邮箱 地 址 的 字符 时 ,输入 框 的 边框 会 显示 为 红色 ,如 图 2-16 所 示 。 


range 输 入 类 型 : 一 人 





电话 呈 码 :asza T 电子 邮箱 :za T |] 
ES- EEE TET 
图 2-15 tel 输入 类 型 在 火狐 浏览 器 图 2-16 email 输入 类 型 在 火狐 
中 的 显示 效果 浏览 器 中 的 显示 效果 


email 输入 类 型 输入 框 的 验证 只 能 简单 验证 用 户 在 输入 框 中 输入 的 电子 邮件 的 地 址 是 
否 包 含 了 “@” 符 号 且 该 符号 不 在 第 一 个 字符 ,不 会 真正 验证 电子 邮件 地 址 格式 的 正确 性 , 即 
电子 邮件 地 址 写成 “123@” 会 被 判断 成 正确 的 。 
输 和 AURL 地 址 :|[456 T | (> RE 答 入 类 型 
用 于 设置 一 个 URL 地 址 的 输入 框 , 当 鼠标 移 到 输入 
于 和 TUM | 框 上 面 会 显示 一 个 提示 信息 框 。 在 该 输入 框 中 输入 的 内 容 
图 2-17 URL 输入 类 型 在 火狐 ”必须 是 一 个 绝对 的 URL 地 址 ,否则 输入 框 的 边框 就 会 显示 
浏览 器 中 的 显示 效果 为 红色 。 如 二 input type 一 "url"” name 一 "user_url" 二。 在 
Firefox 浏览 器 中 的 显示 效果 如 图 2-17 所 示 。 
这 个 地 址 输入 框 在 输入 URL 地 址 时 必须 输入 一 个 完整 的 绝对 URL 地 址 ,包括 传输 协 
议 ,否则 就 会 报错 。 只 要 有 传输 协议 则 不 会 出 任何 问题 。 传 输 协议 可 以 使 用 HTTP 或 者 
FTP, 本 地 的 绝对 URL 地 址 也 可 以 , 即 地 址 开头 为 "file:”。 
(8) number 输入 类 型 
用 于 一 个 设置 数值 的 输入 框 , 当 鼠标 光标 移 到 输入 框 上 面 会 显示 一 个 信息 提示 框 。 可 
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以 对 输入 的 数值 设 定 一 个 范围 ,分 别 用 min 属性 设置 最 小 数值 ,用 max 属性 设置 最 大 数值 。 
如 二 input type 一 "number"”name 一 "use_age" min 一 "14" max 二 "100" 祖 ,在 Firefox 浏览 器 
中 的 显示 效果 如 图 2-18 所 示 。 
:i 革 在 Firefox 浏览 器 中 , 当 输入 框 失去 焦点 时 会 自动 验 
[不 人 于 1 的 证 输入 的 值 是 否 在 控件 所 设置 的 限定 范围 内 。 如 果 不 在 
图 2-18 number 输入 类 型 在 火狐 设置 的 范围 内 ,输入 框 失 去 焦点 时 ， 它 的 边框 就 会 显示 为 
浏览 器 中 的 显示 效果 红色 ,表示 输入 错误 。 
以 上 所 列举 的 tel、email、url 和 number 输入 类 型 在 
Firefox 浏览 器 中 的 验证 错误 都 是 以 输入 框 失 去 焦点 时 , 它 的 边框 显示 成 红色 为 格式 错误 提 
示 信 息 。 在 Chrome 浏览 器 中 则 是 以 提交 表单 时 验证 输入 值 是 否 符合 规范 ,如 果 不 符合 , 提 
交 时 会 在 输入 框 位 置 弹 出 一 个 提示 框 显示 规范 要 求 信息 。 如 果 读 者 需要 查看 不 同 浏览 器 的 
运行 效果 ,请 自行 运行 例 2-10 的 代码 以 查看 运行 效果 。 
【 例 2-10】 HTML 5 新 增 表 单 控件 。 











2. 新 增 的 表单 属性 
HTML 5 新 增 的 表单 属性 见 表 2-18。 
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属 性 


表 2-18 HTML 5 新 增 的 表单 属性 
描 述 





placeholder 


在 输入 型 文本 框 中 显示 描述 性 说 明 或 提示 信息 。 输 入 框 中 一 旦 有 用 户 的 输入 值 
后 ,描述 性 说 明 或 提示 信息 就 会 消失 





autocomplete 


是 否 保存 输入 值 以 备 将 来 使 用 。 值 on 表示 保存 , 值 off 表示 不 保存 





autofocus 


当 页 面 打开 时 ,确定 表单 控件 是 否 获 取 光 标 焦 点 。 一 般 一 个 页 面 只 有 一 个 表单 控 
件 可 以 设置 该 属性 





list 


为 单行 文本 框 增加 的 属性 ,属性 值 为 某 个 datalist 标签 的 id 名 ,形成 一 个 类 似 于 下 
拉 选 择 框 的 控件 ,可 以 直接 从 选择 框 中 选择 输入 值 。 当 选择 列表 中 没有 输入 值 时 ， 
用 户 可 以 自行 输入 





min/ max 


为 range 控件 增加 的 属性 ,限定 数值 的 输入 范围 ,min 为 设置 的 最 小 值 ,max 为 设置 
的 最 大 值 








Step 为 range 控件 增加 的 属性 ,设置 输入 值 递增 或 递减 的 梯度 
required 设置 输入 型 控件 为 必 填 项 ,否则 无 法 提交 表单 。 该 属性 是 表单 中 一 种 最 简单 的 验 





证 方式 


针对 以 上 的 list 属性 ,通过 例 2-11 进行 详细 说 明 。 
【 例 2-11】 list 属性 的 应 用 。 


<!doctype html> 


<html> 
<head> 


<meta charset="utf- 8"> 


<title>1ist 属性 < /title> 


</head> 


<body> 


学 校 <input type="text" list="school"> 


<datalist id="school" style="display:none;"> 
<option value=" 重 庆 工 程 学 院 "> 重 庆 工 程 学 院 </option> 
<option value=" 重 庆 大 学 "> 重庆 大 学 < /option> 
<option value=" 重 庆 工 商 大 学 "> 重庆 工商 大 学 < /option> 
</datalist> 


</body> 
</html> 


程序 的 运行 结果 如 图 2-19 所 示 。 
3. HTML 5 新 增 的 二 output 二 标签 
二 output 记 标签 是 HTML 5 中 新 增 的 一 个 表单 控件 ,用 来 显示 计算 结果 或 脚本 的 运行 


结果 。 该 标签 必须 





包含 在 某 个 表单 中 ,或 者 给 它 添加 form 属性 。 
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图 2-19 list 属 性 


【 例 2-12】 一 output 二 标签 。 





程序 的 运行 结果 如 图 2-20 所 示 。 





2-20 ”应 用 二 output 二 标签 后 的 显示 效果 
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当 拖 动 滑 块 时 ,二 output 二 标签 所 在 的 表单 就 会 接收 到 用 户 的 输入 信息 ,并 将 脚本 运行 
结果 显示 在 二 output 二 标签 中 。 

4. 表单 的 自动 验证 

在 HTML 5 中 ,表单 可 以 实现 简单 的 自动 验证 。 对 于 表单 控件 实现 的 简单 自动 验证 功 
能 基本 上 是 由 一 些 新 增 的 表单 控件 属性 实现 的 。 下 面 介绍 几 个 常用 的 自动 验证 属性 。 

(1) required 属性 

required 属性 设置 输入 型 表单 控件 为 必 填 项 。 表 单 提交 时 ,如 果 设置 了 required 属性 
的 表单 控件 内 容 为 空 , 则 不 允许 提交 , 且 会 出 现 提示 用 户 出 错 的 信息 。 

(2) pattern 属性 

pattern 属性 是 为 表单 控件 设置 正则 表达 式 所 使 用 的 属性 。 提 交 表单 时 ,会 自动 验证 表 
单 控件 中 的 输入 值 是 否 符合 正则 表达 式 所 规定 的 格式 规则 ,如果 不 符合 格式 规则 , 则 不 允许 
提交 表单 ,并 会 有 错误 提示 。 

(3) max 属性 和 min 属性 

max 和 min 这 两 个 属性 主要 用 在 range 输入 类 型 和 日 期 类 型 的 表单 控件 中 ,限定 其 输 
人 数字 或 日 期 的 范围 ,超出 该 范围 , 则 表单 提交 时 会 自动 验证 并 报错 。 

(4) step 属性 

step 属性 限定 输入 数值 递增 或 递减 的 梯度 ,如 果 不 符合 该 梯度 值 的 设置 ,表单 提交 时 
同样 会 自动 验证 并 报错 。 


2.4.5 _ HTML S 画布 


在 HTML 5 中 新 增 了 很 多 的 功能 ,其 中 最 显著 的 功能 就 是 可 以 直接 在 HTML 页 面 中 
绘制 图 形 。 这 里 所 说 的 绘制 图 形 并 不 是 用 鼠标 绘画 ,而 是 通过 HTML 5 新 增 的 二 canvas 二 
标签 创建 一 块 矩形 区 域 ,然后 再 通过 JavaScript 控制 添加 图 片 或 绘制 线条 、 文 字 和 图 形 , 甚 
至 可 以 加 入 动画 。 二 canvas 二 标签 所 创建 出 来 的 这 块 区 域 被 称 为 画布 。 

1. 一 canvas 二 标签 

到 canvas 二 标签 是 HTML 5 中 新 增 的 一 个 很 重要 的 标签 ,专门 用 来 在 页 面 上 绘制 图 
形 。 但 实际 上 二 canvas 二 标签 自身 并 不 绘制 图 形 。 它 相当 于 一 张 空白 的 画布 ,如 果 需 要 绘 
制图 形 ,必须 使 用 JavaScript 脚本 进行 绘制 。 创 建 一 对 二 canvas 二 一 /canvas 二 标签 , 即 在 页 
面 中 放置 了 一 个 可 以 绘图 的 画布 ,该 画布 可 以 通过 样式 来 设置 区 域 的 宽度 和 高 度 。 

【 例 2-13】 二 canvas 二 标签 创建 绘图 画布 。 


吕 




















<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>canvas 标签 </title> 
</head> 


<body> 
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<canvas id="mycanvas" width="200" height="200" style="border:1px solid # 
000;"> 
</canvas> 
</body> 
</html> 


程序 的 运行 结果 如 图 2-21 所 示 。 
-一 -一 在 图 2-21 中 创建 了 一 个 宽度 为 200 像素 、 高 度 
为 200 像素 的 画布 。 由 于 创建 的 画布 只 是 一 个 矩 
形 区 域 ,没有 任何 特征 ,在 浏览 器 中 只 会 显示 为 空 
白 ,看 不 到 效果 。 因 此 ,通过 样式 设置 给 它 添加 了 
一 个 黑色 边框 ,使 其 能 够 展现 在 我 们 眼前 ,从 而 看 
见 画 布 的 区 域 范围 。 另 外 为 该 二 canvas 二 标签 设置 
了 一 个 ID 名 ,主要 是 因为 二 canvas 二 标签 内 绘制 图 
形 都 是 通过 JavaScript 脚本 进行 控制 的 。 没 有 ID， 
JavaScript 程序 代码 要 找到 二 canvas 二 标签 这 个 对 
象 是 很 困难 的 ,因此 我 们 在 创建 二 canvas 二 对 象 时 
都 会 给 它 添加 一 个 ID 名 称 以 便 通 过 脚本 查找 
对 象 。 

2. 绘制 图 形 

在 二 canvas 二 标签 中 绘制 图 形 的 步骤 如 下 。 

第 一 步 : 获取 一 canvas 二 标签 对 应 的 DOM 对 象 ,这 是 一 个 canvas 对 象 。 

第 二 步 : 调用 canvas 对 象 的 getContext() 方 法 ,返回 一 个 CanvasRenderingContext2D 
对 象 , 用 该 对 象 即 可 绘制 图 形 。 

第 三 步 : 调用 CanvasRenderingContext2D 对 象 的 方法 绘制 图 形 。 

在 以 上 的 步骤 中 ,canvas 对 象 的 getContext() 方 法 用 来 选择 在 画布 上 绘制 图 形 的 类 型 。 
这 里 有 “2d” 和 “3d” 可 供 选 择 ,但 只 有 “2d” 是 当前 的 唯一 合法 值 , 可 指定 为 二 维 绘图 。 将 来 
如 果 二 canvas 二 标签 扩展 到 支持 3D 绘图 ,getContext() 方 法 可 能 允许 传递 一 个 "3d? 字 符 串 
参数 来 进行 3D 绘图 。getContext() 方 法 的 返回 值 是 一 个 CanvasRenderingContext2D 对 
象 ,使 用 它 可 以 在 二 canvas 二 标签 对 象 中 绘图 。 

用 到 canvas 二 标签 绘制 图 形 有 两 种 方式 : 填充 (fill) 和 绘制 边框 (stroke)。 填 充 是 填 满 
图 形 的 内 部 区 域 ;绘制 边框 是 不 填充 图 形 的 内 部 ,只 绘制 图 形 的 边框 。 

这 两 种 绘制 图 形 的 方式 分 别 有 各 自 的 样式 设置 : 填充 图 形 方 式 的 样式 采用 fillStyle 属 
性 设置 ;绘制 图 形 边框 方式 的 样式 采用 strokeStyle 属性 设置 ;线条 的 粗细 样式 采用 
lineWidth 属性 设置 。 

(1) 绘制 矩形 

在 canvas 对 象 中 绘制 矩形 有 两 种 方式 , 即 填充 一 个 矩形 区 域 和 绘制 一 个 矩形 边框 。 
表 2-19 中 分 别 列举 了 和 矩形 绘制 两 种 方式 的 定义 。 
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图 2-21 用 一 canvas 二 标签 创建 的 画布 
在 火狐 浏览 器 中 的 显示 效果 
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表 2-19 和 矩形 绘制 两 种 方式 的 定义 
方式 定义 与 描述 





context. fillRect(x,y,width,height) 填 充 一 个 起 点 坐标 为 (x,y) ,宽度 为 width、 高 度 为 


填充 矩形 区 域 height 的 矩形 区 域 





context. strokeRect(x,y,width,heighbD 绘 制 一 个 起 点 坐标 为 (x,y)、 宽 度 为 width ,高 


绘制 矩形 边框 | 度 为 height 的 矩形 边框 





以 上 定义 中 ,context 指 的 是 getContext() 方 法 返回 的 CanvasRenderingContext2D 对 
象 ,画布 的 左上 角 为 坐标 原点 ,和 矩形 的 起 点 为 矩形 的 左上 角 。 
【 例 2-14】 绘制 矩形 。 


< !doctype html> 
<html> 
<head> 
<meta charset="utf- 8"> 
<title> 绘 制 矩形 < /title> 
</head> 
<body> 
<canvas id="myrect" width="400" height="200" style="border:1lpx solid 
#000;">< /canvas> 
<script type= "text/javascript"> 
Var cvs=document .getElementById ("myrect"); 
Var context=cvs.getContext ("2d"); 
context .fillRect (50,50,120,80); 
context .strokeRect (200, 50,120, 80); 
</script> 
</body> 
</html> 


程序 的 运行 结果 如 图 2-22 所 示 。 























例 2-14 中 通过 fillRect(50,50,120,80) 和 strokeRect(200,50,120,80) 填 充 了 一 个 起 点 
坐标 为 (50,50)、 宽 为 120 像素 、 高 为 80 像素 的 矩形 区 域 , 和 绘制 了 一 个 起 点 坐标 为 (200， 
50)、 宽 为 120 像素 、 高 为 80 像素 的 矩形 边框 。 在 没有 样式 设置 的 情况 下 ,默认 的 填充 颜色 
和 线条 颜色 均 为 黑色 。 如 果 要 对 绘制 的 图 形 设置 样式 ,可 以 通过 表 2-20 中 的 方法 设置 。 
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表 2-20 绘制 图 形 样式 来 设置 图 形 的 属性 


方 法 定义 与 描述 




















fillstyleO) | 填充 图 形 样式 的 设置 ,主要 设置 颜色 
strokeStyle() 绘制 图 形 边框 样式 的 设置 ,主要 设置 颜色 





绘制 图 形 时 ,填充 颜色 和 边框 的 颜色 分 别 通过 fillStyle 属性 和 strokeStyle 属性 来 设 
置 。 颜 色 值 可 以 使 用 普通 的 英文 颜色 名 称 、 样 式 表 中 的 十 六 进 制 颜色 值 或 者 rgb(0 一 255， 
0 一 255,0 一 255) 函 数 .rgba(0 一 255,0 一 255,0 一 255 ,0 一 1) 函数 来 表示 。 

【 例 2-15】 绘制 具有 颜色 样式 的 矩形 。 





< !doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 绘 制 具有 颜色 样式 的 矩形 < /title> 
</head> 
<body> 
<canvas id="myrect" width="400" height="200" style="border:1px solid 
#000;">< /canvas> 
<script type= "text/javascript"> 
var cvs=document .getElementById ("myrect"); 
Var context=cvs.getContext ("2d"); 
context .fillSstyle="#f0f"; 
context .fillRect (50, 50,120, 80); 
context .fillstyle="rgba (255,0,0,0.6)"; 
context .fillRect (30,70,120,80); 
context.strokeStyle="rgb(0,255,0)"; 
context.lineWidth=10; 
context .strokeRect (200, 50,120, 80); 
context.strokeStyle="yellow"; 
context.lineJoin="round"; 
context . strokeRect (185, 70,120, 80); 
</script> 
</body> 
</html> 


程序 的 运行 结果 如 图 2-23 所 示 。 
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到 2-23 绘制 具有 颜色 样式 的 甜 天 
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例 2-15 中 通过 fillStyle 属性 设置 了 矩形 的 填充 颜色 ,strokeStyle 属性 设置 了 和 矩形 的 边 
框 颜色 。 这 两 个 属性 都 可 以 多 次 设置 ,绘制 图 形 的 颜色 取决 于 在 绘制 图 形 前 的 最 后 一 次 颜 
色 设 置 。 颜 色 可 以 设置 透明 度 。 案 例 中 的 lineWidth 属性 是 用 来 设置 边框 线条 的 宽度 。 
lineJoin 属性 设置 线条 连接 点 的 风格 ,lineJoin 属性 值 可 以 为 meter( 默 认 ) ,round( 圆 ) .bevel 
(和 斜面) 。 

(2) 绘制 字符 

在 canvas 对 象 中 绘制 字符 类 似 于 绘制 矩形 ,同样 有 两 种 方式 , 即 fillText() 填 充 字 符 和 
strokeText() 绘 制 字 符 轮廓 。 定 义 格式 如 下 : 
































fillText (text,x,y[,maxWidth]); 
strokeText (text,x,y[,maxWidth]); 


其 中 参数 text 为 绘制 的 文字 内 容 ;(x,y) 为 绘制 字符 的 起 点 坐标 ,正常 情况 下 ,以 第 一 
个 字符 的 左上 角 为 起 点 坐标 ;maxWidth 为 绘制 字符 的 最 大 宽度 。 

样式 设置 还 是 采用 fillStyle 属性 和 strokeStyle 属性 ;字符 的 字体 样式 通过 font 属性 设 
置 , 并 且 按 照 font= 王 "fontStyle fontVariant fontWeight fontSize/lineHeight {fontFamily" 的 
顺序 进行 设置 ;字符 的 水 平 对 齐 方式 通过 textAlign 属性 设置 ,如 图 2-24 所 示 ; 字 符 的 垂直 
对 齐 方式 通过 textBaseline 属性 设置 ,如 图 2-25 所 示 。 














extAlign=start 
textAlign=: 
a Bottom 、， i 
extAlign=left 二 om Migde—Alphabetic oo OT— 
textAlig ei Top anging 
textAlign=rig| 
图 2-24 绘制 字符 的 水 平 对 齐 方式 图 2-25 绘制 字符 的 垂直 对 齐 方式 


【 例 2-16】 绘制 字符 。 


<!ldoctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 绘 制 字符 </title> 
</head> 


<body> 
<canvas id= "mystr" width="500" height="300" style="border:1px solid 
#000;"></canvas> 
<script type="text/javascript"> 
var cvs=document .getElementById ("mystr"); 
Var str=cvs.getContext ("2d"); 
str.fillstyle="rgb (255,0,0)"; 
str.font="normal bold 50px 隶书 "; 


53 








| 交互 式 Web 前 端 开 发 实践 
str.textAlign="left"; 
str.textBaseline="top"; 
str.fillText ("交互 式 Web 前 端 开发 ", 20, 50, 200); 
str.fillText ("交互 式 Web 前 端 开发 ", 20, 120); 
str.strokeText ("交互 式 web 前 端 开发 ",20, 200); 

</script> 
< /body> 
</html> 


程序 的 运行 结果 如 图 2-26 所 示 。 
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(3) 设置 阴影 
在 canvas 对 象 中 绘制 图 形 时 可 以 设置 阴影 。 可 设置 阴影 的 属性 及 其 描述 如 表 2-21 
所 示 。 
表 2-21 可 设置 阴影 的 属性 及 其 描述 














属 性 描 述 
shadowBlur 设置 阴影 的 模糊 度 ,是 一 个 浮 点 数 ,数值 越 大 ,模糊 程度 越 大 
shadowColor 设置 阴影 的 颜色 
shadowOffsetX 设置 阴影 在 X 方 向 的 偏 移 
shadowOffsetY 设置 阴影 在 Y 方 向 的 偏 移 





【 例 2-17】 设置 阴影 。 


<!doctype html> 

<html> 

<head> 
<meta charset="utf- 8"> 
<title> 设 置 阴影 </title> 
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</head> 


<body> 


<canvas id="mycvs" width="500" height="300" style="border:1px solid 
#000;"></canvas> 
<script type= "text/javascript"> 


Var cvs=document .getElementById ("mycvs"); 
Var context=cvs.getContext ("2d"); 

context .fillstyle="rgba (255,0,0,1)"; 

context .shadowBlur=15; 

context .shadowColor="#000"; 

context .shadowOffsetX=-10; 

context .shadowOffsetY=-6; 

context .fillRect (80,30,120,80); 

context . strokeRect (280, 30,120, 80); 

context .font= "normal bold 50px 隶书 "7 

context .shadowColor="#f0f"7 

context .fillText ("交互 式 Web 前 端 开 发 ",20,190) 7 
context .strokeText ("交互 式 Web 前 端 开发 ",20,270) 


</script> 


</body> 
</html> 


程序 的 运行 结果 如 图 2-27 所 示 。 


大 ! 中 filey//E 《将 式 web 前 沪 发 。 C || Q 二 至 <CojzK> 








BB 





交互 式 Web 前 端 开发 
交互 式 Web 前 端 开发 











3. 使 用 路 径 绘 制图 形 
as 二 标签 中 使 用 路 径 可 以 绘制 更 复杂 的 图 形 。 使 用 路 径 绘 


在 一 canv: 
如 下 。 














制图 形 的 步骤 


第 一 步 : 调用 CanvasRenderingContext2D 对 象 的 beginPath() 方 法 开始 定义 路 径 。 
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第 二 步 : 调用 CanvasRenderingContext2D 的 各 种 方法 添加 子路 径 。 
第 三 步 : 调用 CanvasRenderingContext2D 的 closePath() 方 法 关闭 路 径 。 
第 四 步 : 调用 CanvasRenderingContext2D 的 fill() 或 stroke() 方 法 来 填充 或 绘制 路 径 。 


(1) 绘制 直线 


使 用 路 径 绘 制 直线 将 会 使 用 到 canvas 对 象 中 的 一 些 方法 ,如 表 2-22 所 示 。 
表 2-22 使 用 路 径 的 方法 及 描述 








方 法 描 述 
beginPath() 开始 一 条 路 径 ,或 重 置 当 前 的 路 径 
closePath() 创建 从 当前 点 到 指定 点 的 路 径 





moveTo() 


移动 到 一 个 指定 的 坐标 。 可 以 指定 当前 点 的 坐标 





lineTo() 





创建 从 当前 点 到 画布 中 指定 点 的 线条 (该 方法 并 不 会 创建 线条 ) 


上 面 的 方法 只 是 定义 使 用 路 径 的 方法 ,真正 绘制 确定 的 路 径 和 图 形 却 需要 使 用 stroke() 
方法 在 画布 上 绘制 路 径 和 使 用 fill 〇 方法 来 填充 图 像 (默认 是 黑色 )。 
【 例 2-18】 绘制 矩形 的 对 角 线 和 使 用 路 径 绘 制 三 角形 。 
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程序 的 运行 结果 如 图 2-28 所 示 。 








图 2-28 例 2-18 的 运行 结果 


(2) 使 用 arcTo() 方 法 绘制 圆 弧 
使 用 arcTo() 方 法 可 以 向 canvas 对 象 的 当前 路 径 上 添加 一 段 圆 弧 。 格 式 如 下 : 


通过 arcTo( ) 方 法 绘制 圆 弧 的 方式 如 下 : 假设 从 当前 点 到 Pi (zi ,yi) 绘 制 一 条 线条 ,再 
从 Pi(zi,y1) 到 Ps(zsyyz) 绘 制 一 条 线条 ,arcTo() 则 绘制 一 段 同 时 与 上 面 两 条 线 相 切 且 半 


径 为 radius 的 圆 弧 ,如 图 2-29 所 示 。 
当前 点 Pi 1) 
一 一 一 一 





2-29 用 arcTo() 方 法 绘制 的 圆 弧 


【 例 2-19】 通过 arcTo() 方 法 绘制 一 个 圆 角 和 矩形 。 
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程序 的 运行 结果 如 图 2-30 所 示 。 
(3) 使 用 arc0 〇 方法 绘制 圆 弧 
使 用 arc() 方 法 也 可 以 创建 一 段 圆 弧 或 曲线 。 格 式 如 下 : 





向 canvas 对 象 的 当前 路 径 上 添加 一 段 弧 ,绘制 以 (x,y) 为 圆心 、radius 为 半径 ,从 
startAngle 角度 开始 ,到 endAngle 角度 结束 的 圆 弧 。startAngle.endAngle 以 弧度 作为 单 
位 。counterclockwise 参数 为 可 选项 ,规定 应 该 道 时 针 还 是 顺 时 针 进 行 绘图 。 设 置 为 false 
则 顺 时 针 绘 制 圆 弧 ,设置 为 true 则 为 逆 时 针 绘 制 圆 弧 。 如 需 使 用 arc() 方 法 来 创建 一 个 贺 
形 , 请 把 起 始 角 弧度 设置 为 0, 结束 角 弧 度 设置 为 2 * Math. PI。 使 用 arc( ) 方 法 绘制 圆 弧 的 
示意 图 如 图 2-31 所 示 。 


1.5*PI 

网 结束 角 
1*PI 国 柄 站 0 

0.5*PI 


* 中心: are(100,75,50,0*Math.PIl,1.5*Math.Pl) 
* 起 始 角 : arc(100,75,50,0,1,5*Math.PI) 
。 结 束 和 角 : arc(100,75,50,0*Math.PL,1.5*Math.PD) 


图 2-30 绘制 圆 角 矩形 图 2-31 用 arc() 方 法 绘制 圆 弧 的 示意 图 





【 例 2-20】 通过 arc( ) 方 法 绘制 一 个 圆 ,1/4 圆 弧 和 一 个 闭合 的 3/4 圆 形 。 
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程序 的 运行 结果 如 图 2-32 所 示 。 





2-32 用 are() 方 法 绘制 圆 及 圆 弧 
【 例 2-21】 圆 的 投影 。 
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ty.fillstyle="rgba (255,0,255,"+ (10-i3)* 0.1+" 


ty.£il1(); 
} 
</script> 
</body> 
</html> 
程序 的 运行 结果 如 图 2-33 所 示 。 


使 用 路 径 还 可 以 画 旧 

花 \ 五 角 星 、 火 柴 人 

一 一 举例 了 , 留 给 读者 自己 
绘制 颜色 渐变 的 图 形 

在 canvas 对 象 上 还 可 以 绘制 

常用 的 有 两 种 渐变 


形 
渐变 。 








1 独立 完成 。 





形式 : 线性 





( 1 ) 线 性 渐变 
创建 线性 渐变 的 步骤 如 下 


第 


ystart, xend,yend ) 方 法 创建 


法 返回 
2 


四 


雪 六 下 
色 添 加 在 起 始 4 


- 步 : 调用 createLinearGradient ( xstart， 


,该 方 图 2-33 


-个 线性 渐变 


-个 CanvasGradient 对 象 
- 步 : 调用 CanvasGradient 对 象 的 addColorStop(float offset,string color) 方 法 向 渐 
0 表示 把 颜 


第 三 步 ， 再 将 CanvasGradient i 
【 例 2-22】 线性 渐变 。 
<!doctype html> 
<html> 
<head> 
<meta charset="utf- 8"> 
<title> 线 性 渐变 < /title> 
</head> 
<body> 


<canvas id="linegrad" width="400" height="280" style= 


#000;">< /canvas> 
<script type= "text/javascript"> 


了 多 j 边 形 、 花 条 、 桃 心 
等 更 加 复杂 的 图 形 , 这 里 





就 不 


颜色 渐变 的 图 


变 和 径 向 








第 2 章 HTML 标记 语 








可 ED 


EE 加 二 








人 ley//E/ 《交互 式 web 葡 访 开 发 实 请 》 由 > 为 三 














圆 的 投影 


的 点 ,是 0 一 1 


之 间 的 一 个 小 数 。 
参数 color 为 添加 的 颜色 值 。 


从 fillStyle 或 strokeStyle 属性 即 可 。 


"border:1px solid 


var ctx=document .getElementById ("linegrad") .getContext ("2d"); 


ctx.save(); 
ctx.translate (30, 20); 


// 创 建 线性 渐变 


Var lg=ctx.createLinearGradient (0,0,160,80); 


// 向 线性 渐变 上 添加 颜色 
1g.addcolorstop (0.2, "#£00"); 
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程序 的 运行 结果 如 图 2-34 所 示 。 





2-34 线性 渐变 


(2) 径 向 渐变 

调用 createRadialGradient(sx,sy,sr,ex,ey,er) 方 法 创建 径 向 渐变 ,与 线性 渐变 的 步骤 
完全 类 似 。 其 中 ,参数 sx\sy 为 渐变 开始 时 圆 的 圆心 坐标 ,sr 为 渐变 开始 时 圆 的 半径 ;参数 
ex、ey 为 渐变 结束 时 加 的 圆心 坐标 .er 为 渐变 结束 时 圆 的 半径 。 

【 例 2-23】 径 向 渐变 。 
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程序 的 运行 结果 如 图 2-35 所 示 。 














图 2-35 径 向 渐变 
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canvas 画布 功能 是 HTML 5 中 新 增 的 一 个 很 重要 的 功能 ,这 里 只 介绍 了 一 些 基 础 知识 
及 使 用 画布 绘制 图 形 的 常用 功能 。 其 余 的 很 多 功能 ,如 果 读 者 感 兴趣 可 以 再 深入 研究 。 














本 章 小 结 


本 章 主要 介绍 了 HTML 的 一 些 基础 知识 。 通 过 本 章 的 学 习 , 可 以 了 解 HTML 的 语法 
及 编写 规范 , 即 如 何 创建 一 个 Web 页 面 。 其 中 包含 HTML 中 的 各 种 标签 的 应 用 ,目前 使 用 
的 HTML 的 规范 ,HTML 与 XHTML 的 区 别 与 联系 。 除 此 之 外 ,简单 介绍 了 目前 比较 流 
行 的 HTML 5 的 应 用 。HTML 5 新 增 了 很 多 标签 和 属性 ,大 大 增强 了 Web 页 面 的 功能 ,使 
Web 页 面 的 开发 更 快捷 、 更 高 效 。 
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第 3 章 CSS 层 到 样式 表 


3.1 CSS 2 基础 


3.1.1 CSS 编写 规范 


CSS(cascading style sheet) 称 为 层 琶 样式 表 , 也 叫 CSS 样式 表 或 样式 表 , 文 件 的 扩展 名 
为 . css ,用 来 设置 Web 页 面 中 各 种 标签 的 样式 ,如 设置 文字 大 小 、 颜 色 , 行 高 .背景 等 。 所 谓 
“ 层 琶 ”是 指 当 在 HTML 文件 中 引用 多 个 样式 文件 时 ,浏览 器 将 依据 层 释 顺序 及 就 近 原 则 
进行 处 理 , 以 避免 发 生 冲 突 。CSS 样式 表 是 一 种 控制 网 页 样式 ,并 将 样式 信息 与 网 页 结构 
分 离 的 一 种 标记 性 语言 。 

CSS 样式 表 由 若干 条 样式 规则 组 成 。 这 些 样式 规则 可 以 应 用 到 HTML 的 标签 中 来 定 
义 页 面 的 显示 效果 。 样 式 规 则 由 选择 符 (selector)、 属 性 (property) 及 属性 值 (value) 组 成 ， 
格式 如 下 : 


selector{property:value;property:value;property:value; ...} 


从 以 上 的 格式 中 可 以 看 出 ,一 条 样式 规则 包含 一 个 选择 符 和 若干 属性 及 对 应 的 属性 值 。 
属性 及 属性 值 用 大 括号 包含 起 来 ;属性 与 属性 值 之 间 用 冒号 “:” 隔 开 ; 属 性 值 对 之 间 用 分 号 
“;” 隔 开 。 如 为 段落 标签 二 p 二 设置 样式 如 下 : 


p{font-family:" 微 软 雅 黑 ";font-size:24px;color:#ff0000;} 


以 上 样式 设置 段落 文字 字体 为 微软 雅 黑 . 字 体 大 小 24 像素 ,字体 颜色 为 红色 。 

2. CSS 样式 表 类 型 

CSS 样式 表 有 三 种 类 型 : 行内 样式 表 、 内 部 样式 表 和 外 部 样式 表 。 

(1) 行内 样式 表 

行内 样式 表 在 这 三 种 样式 表 中 是 最 简单 .最 直观 的 一 种 样式 表 。 它 是 直接 将 样式 规则 
写 人 HTML 文件 中 标签 的 style 属性 中 :以 属性 值 的 形式 存在 。 如 对 段落 标签 设置 样式 
如 下 


<p style="font- family: ' 微 软 雅 黑 ';font- size:24pxycolor:#ff0000;"> 段 落 文字 
</p> 


交互 式 Web 前 端 开 发 实践 

行内 样式 表 是 将 样式 规则 以 属性 值 的 形式 直接 写 入 标签 的 style 属性 中 ,并 直接 作用 于 
该 标签 。 虽 然 简单 直观 ,但 如 果 其 他 的 标签 或 者 相同 的 标签 要 采用 一 样 的 样式 ,也 需要 在 标 
签 中 设置 style 属性 ,并 设置 同样 的 样式 规则 。 这 样 整个 HTML 页 面 结构 不 但 显得 腾 肿 ， 
还 没有 起 到 页 面 结构 和 样式 代码 进行 分 离 的 作用 ,后 期 维护 也 很 困难 。 因 此 ,这 种 类 型 的 样 
式 表 并 不 常用 。 

(2) 内 部 样式 表 

内 部 样式 表 是 将 样式 规则 写 在 二 style 二 和 二 /style 二 标签 之 间 , 并 通常 将 该 段 样式 代 
码 添加 到 HTML 页 面 的 头 部 , 即 二 head 放 与 二 /head 二 标签 内 部 。 其 格式 如 下 : 











<head> 
<meta charset="utf-8"> 
<title> 径 向 渐变 < /title> 
<style> 
py 
font-family:" 微 软 雅 黑 "; 
font- size:24px; 
color:#ff£0000; 
} 
</style> 
</head> 


内 部 样式 表 虽 然 没 有 完全 将 页 面 结 构 和 样式 表 分 离开 来 ,但 对 于 一 些 简 单 且 某 些 标签 
样式 需要 统一 的 页 面 来 说 ,使 用 内 部 样式 表 比 使 用 行内 样式 表 的 页 面 代 码 结构 更 优化 。 

(3) 外 部 样式 表 

外 部 样式 表 是 用 户 重 新 创建 的 一 个 扩展 名 为 . css 的 文件 。 样 式 规则 按照 语法 格式 直 
接 写 人 该 文件 中 ,不 再 添加 任何 标签 。 

3. 文档 中 如 何 引 用 CSS 文件 

行内 样式 表 和 内 部 样式 表 都 是 直接 写 在 HTML 文档 中 的 ,所 以 不 存在 引用 的 问题 。 
但 外 部 样式 表 是 一 个 独立 的 文件 ,与 HTML 文档 没有 关联 性 。HTML 文档 要 使 用 外 部 样 
式 表 呈现 出 样式 的 显示 效果 ,就 必须 将 两 个 文档 关联 起 来 。 它 们 是 如 何 联系 的 呢 ? 换 句 话 
说 ,HTML 文档 是 如 何 引 用 CSS 外 部 样式 表 的 呢 ? 有 两 种 方式 : 链接 和 导入 。 下 面 分 别 
介绍 。 

(1) 链接 外 部 样式 表 

链接 外 部 样式 表 是 将 外 部 样式 表 文 件 通过 一 link 二 标签 链接 到 HTML 文档 的 头 部 即 
一 head 盖 与 一 /head 二 之 间 ,代码 如 下 : 


<head> 

<meta charset="utf- 8"> 

<title> 径 向 渐变 < /title> 

<link rel="stylesheet" type="text/css" href="* .css" /> 
</head> 





其 中 ,属性 rel 表示 链接 到 样式 表 , 值 为 stylesheet。 属 性 type 表示 样式 表 类 型 为 CSS 
样式 表 。 属 性 href 指定 CSS 样式 表 文件 的 路 径 , 可 以 使 用 相对 路 径 或 者 绝对 路 径 。 
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链接 外 部 样式 表 是 CSS 使 用 中 最 频繁 .最 实用 的 方式 ,也 是 目前 制作 HTML 页 面 最 常 
用 的 一 种 方式 。 它 最 大 的 优势 就 是 将 页 面 结构 HTML 代码 和 样式 文件 CSS 代码 实现 了 完 
全 的 分 离 。 同 一 个 CSS 文件 可 以 被 多 个 HTML 文件 链接 ,一 个 HTML 文件 也 可 以 链接 多 
个 CSS 文件 。 为 了 实现 相同 的 样式 风格 ,可 以 将 同一 个 CSS 文件 链接 到 网 站 所 有 的 页 面 
中 。 如 果 需 要 修改 样式 ,只 需 修 改 这 一 个 CSS 文件 即 可 。 这 使 得 程序 员 在 进行 Web 前 端 
开发 和 后 期 的 维护 时 都 十 分 方便 有效 。 

(2) 导入 外 部 样式 表 

导入 外 部 样式 表 是 将 外 部 样式 表 文 件 通过 使 用 @import 导入 内 部 样式 表 二 style 二 与 
二 /style 二 标签 中 , 且 放 在 内 部 样式 表 的 开始 部 分 。 代 码 如 下 : 


<head> 
<meta charset="utf-8"> 
<title> 径 向 渐变 < /title> 
<style> 

@ import "* .css"; 


ee 

</head> 

导入 外 部 样式 表 相 当 于 将 外 部 样式 表 导 入 内 部 样式 表 中 ,与 链接 外 部 样式 表 类 似 , 同 样 
实现 了 结构 代码 与 CSS 代码 的 分 离 。 一 个 HTML 文件 中 可 以 导入 多 个 CSS 文件 ,一 个 
CSS 文件 同样 可 以 被 多 个 HTML 页 面 导入 。 

(3) 链接 外 部 样式 表 与 导入 外 部 样式 表 的 区 别 

链接 外 部 样式 表 和 导入 外 部 样式 表 从 本 质 上 来 说 都 实现 了 结构 代码 与 样式 代码 的 分 
离 。 但 它们 的 语法 和 运作 方式 有 所 不 同 。 

从 语法 上 看 ,链接 外 部 样式 表 采 用 的 二 link 二 标签 将 样式 文件 链接 进 了 HTML 文件 。 
导入 外 部 样式 表 采 用 的 是 @import, 将 样式 文件 导入 了 HTML 文件 的 内 部 样式 表 中 。 

从 运作 方式 来 看 ,链接 外 部 样式 表 是 HTML 文件 中 的 标签 需要 什么 样 的 样式 风格 时 
才 将 外 部 样式 表 链 接 进 HTML 文件 。 导 入 外 部 样式 表 则 是 在 HTML 文件 初始 化 时 , 即 
浏览 器 加 载 HTML 文件 时 ,就 将 外 部 样式 表 中 所 有 的 样式 代码 导入 HTML 文件 的 内 部 
样式 表 中 。 导 入 方式 相 较 于 链接 方式 在 浏览 器 加 载 页 面 时 比较 耗 时 ,但 显示 效果 没有 任 
何 差别 。 

在 HTML 文档 中 引用 CSS 文件 不 管 采用 哪 种 方式 ,最 好 是 根据 需求 灵活 处 理 。 


3.1.2 CSS 选择 符 


CSS 选择 符 也 叫 CSS 选择 器 ,HTML 页 面 中 的 样式 都 是 通过 CSS 选择 器 来 进行 控制 
的 。CSS 选择 器 可 以 是 HTML 的 结构 标签 、 类 、ID 或 者 是 标签 的 某 种 状态 (如 “a:hover”)。 
因此 ,可 以 把 CSS 选择 器 分 为 标签 选择 器 、 类 选择 器 、ID 选择 器 和 伪 类 选择 器 。 
1. 标签 选择 器 
标签 选择 器 是 使 用 HTML 文档 中 的 标签 名 作为 选择 符 来 定义 样式 规则 。 如 下 面 的 代 
码 定义 了 部 分 标签 的 样式 。 
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通过 上 面 所 列举 的 标签 选择 器 的 样式 定义 ,只 要 页 面 中 出 现 该 标签 的 地 方 ,就 会 显示 出 
所 定义 的 样式 风格 。 要 设置 所 有 的 标签 ,并 不 需要 将 HTML 中 所 有 的 标签 名 写 出 来 。CSS 
提供 了 通配符 选择 器 " * ”, 它 可 以 代表 所 有 的 标签 ,定义 如 下 : 


使 用 标签 选择 器 可 以 定义 页 面 中 所 有 标签 的 显示 样式 ,但 是 如 果 要 对 同一 种 标签 在 同 
一 个 页 面 中 的 不 同 地 方 使 用 不 同 的 样式 , 仅 依靠 标签 选择 器 是 实现 不 了 的 。 这 时 就 需要 类 
选择 器 来 达到 目的 。 

HTML 中 的 每 一 个 标签 都 具有 class 属性 ,并 给 该 标签 定义 一 个 类 名 , 即 class 属性 的 
属性 值 。 这 样 相 同 的 标签 可 以 具有 不 同 的 类 名 。 在 设置 样式 时 通过 类 名 来 定义 不 同 的 
样式 。 

标签 的 类 名 作为 CSS 的 类 选择 器 时 需要 在 类 名 前 添加 符号 ”.”, 用 以 定义 样式 规则 , 代 
码 格式 如 下 : 





前 提 是 存在 结构 代码 : 





类 选择 器 所 定义 的 样式 只 呈现 在 具有 该 类 名 的 标签 的 显示 效果 。 如 果 标 签 中 没有 该 类 
名 , 则 该 标签 在 页 面 上 的 显示 效果 不 具有 该 类 所 定义 的 样式 风格 。 某 类 选择 器 所 定义 的 样 
式 还 可 以 应 用 到 其 他 标签 中 。 如 上 面 定义 的 “. black” 除 应 用 到 一 p 过 标签 中 ,还 可 以 应 用 到 
一 a> 标 签 中 ,同样 有 效 。 但 是 上 面 代码 中 所 定义 的 “p. black" 则 只 能 应 用 在 定义 了 类 名 为 
“black” 的 二 p 二 标签 中 ,不 能 应 用 于 其 他 的 标签 (如 :一 a class 二 "black" 志 文字 二 /a 二 ) ,该 
标签 不 具有 类 “black” 所 定义 的 样式 效果 。 

3. ID 选择 器 

ID 选择 器 与 类 选择 器 类 似 , 是 标签 中 的 id 属性 的 属性 值 设置 的 名 称 作为 选择 器 来 定 
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义 样式 规则 。ID 名 作为 选择 器 定义 样式 规则 时 需要 在 ID 名 前 添加 符号 #”, 样 式 定义 代 
码 格式 如 下 : 





#black{ 
font- size:12px; 
color:#000000; 

} 

或 者 

P#blackt{ 
font- size:12px; 
color:#000000; 

} 


同样 需要 结构 标签 中 定义 id 属性 。 

与 类 选择 器 所 不 同 的 是 ,一 个 网 页 文件 中 的 标签 只 能 使 用 一 次 ID 名 ,如 果 其 他 的 标签 
需要 使 用 , 则 要 另 命名 一 个 ID 名 称 , 即 一 个 ID 名 称 在 一 个 页 面 文件 中 只 能 使 用 一 次 ,不 能 
重复 使 用 。 

类 选择 器 与 ID 选择 器 的 区 别 : 类 选择 器 可 以 在 任意 数量 的 标签 中 使 用 ,而 ID 选择 器 
在 页 面 的 标签 中 只 能 使 用 一 次 :类 选择 器 的 优先 级 比 ID 选择 器 的 优先 级 低 , 即 当 ID 选择 器 
与 类 选择 器 发 生 冲突 时 ,优先 使 用 ID 选择 器 定义 的 样式 。 

4. 伪 类 选择 器 

伪 类 选择 器 所 定义 的 样式 规则 并 不 作用 在 某 个 具体 的 标签 上 ,而 是 作用 在 标签 的 状态 
上 。 伪 类 选择 器 有 : :first-child、:focus、:lang、:link、:visitited、:hover、:active 等 。 其 中 最 
常用 的 是 超 链 接 的 伪 类 , 即 a: link、a: visitited 、a: hover 和 a:active。 它 们 的 状态 描述 见 
表 3-1。 

表 3-1 超 链接 的 伪 类 








伪 类 选择 器 状态 描述 伪 类 选择 器 状态 描述 
a:link 未 访问 的 超 链接 a:hover 鼠标 光标 停留 在 超 链接 上 
asvisitited 已 访问 的 超 链 接 a:active 激活 超 链接 











伪 类 选择 器 的 应 用 减少 了 文档 对 于 类 和 ID 的 定义 ,使 得 文档 更 简洁 。CSS 3 中 还 新 增 
了 一 些 结构 伪 类 选择 器 ,通过 文档 结构 树 来 匹配 HTML 中 特定 的 标签 。CSS 3 中 新 增 的 结 
构 伪 类 选择 器 见 表 3-2。 
表 3-2 结构 伪 类 选择 器 

















E:root 文档 的 根 元 素 ,HTML 文档 就 是 HTML 元 素 

E:nth-childCn) 其 父 元 素 的 第 个子 元 素 , 第 一 个 元 素 对 应 的 ”为 1 
E:nth-lastehildCn) 其 父 元 素 的 倒数 第 个子 元 素 .倒数 第 一 个 元 素 对 应 的 n 为 1 
E:last-child 父 元 素 的 最 后 一 个 子 元 素 , 相 当 于 nth-last-child(1) 
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体 大 小 根据 浏览 器 不 同 而 有 所 不 同 , 一 般 情 况 下 为 16 像素 ,字体 以 宋体 或 者 微软 雅 黑 为 主 。 
在 网 页 中 ,文本 的 颜色 ,间距 ,行距 .大 小 .字体 等 效果 多 种 多 样 , 必 须根 据 设计 需求 进行 排 





续 表 

选 择 器 状态 描述 
E:only-child 父 元 素 下 仅 有 的 一 个 子 元 素 
E:nth-of-type(n) 父 元 素 下 使 用 同 种 标签 的 第 n 个子 元 素 ,与 :nth-child(n) "类似 
E:nth-last-of-type(n) 父 元 素 下 使 用 同 种 标签 的 倒数 第 nn 个 子 元 素 ,与 :nth-last-child(n)" 类 似 
El:firstroftype 父 元 素 下 使 用 同 种 标签 的 第 一 个 子 元 素 , 相 当 于 * :nth-of-type(1)” 
E:last-of-type 父 元 素 下 使 用 同 种 标签 的 最 后 一 个 子 元 素 , 相 当 于 * :nth-last-of-type(1)” 
E:only-of-type 父 元 素 下 使 用 同 种 标签 的 唯一 一 个 子 元 素 
E:empty 一 个 不 包含 任何 子 元 素 的 标签 。 注 意 : 文本 节点 也 被 看 作 子 元 素 





伪 类 选择 器 在 设置 页 面 中 某 些 特定 样式 时 非常 有 用 且 高 效 , 可 以 避免 在 页 面 结构 中 使 
用 大 量 的 类 或 ID 来 完成 。 如 页 面 中 的 某 一 表格 奇数 行 与 偶数 行 的 样式 不 一 致 时 ,采用 伪 类 
选择 器 就 可 以 避免 在 结构 代码 中 添加 大 量 的 类 来 完成 。 


3.1.3 文本 样式 
文本 在 HTML 中 很 重要 ,可 以 说 是 网 页 的 核心 内 容 。 默 认 情况 下 ,文本 是 黑色 的 , 字 





版 ,才能 使 页 面 看 起 来 主 次 分 明 。 文 本 样式 包括 字体 属性 和 段落 属性 。 


1. 字体 属性 


虽说 文本 是 网 页 中 最 主要 的 内 容 ,如果 排列 得 杂乱 无 章 , 会 让 人 觉得 枯燥 乏味 ,但 如 果 
版 式 美观 大 方 ,并 结合 网 页 的 其 他 元 素 合 理 进 行 样式 设置 ,会 让 人 眼前 一 亮 ,让 人 流连 忘 返 ， 
使 网 页 内 容 给 浏览 者 留 下 深刻 的 印象 。 字 体 属 性 及 描述 见 表 3-3。 


表 3-3 字体 属性 及 描述 














属 性 描 述 
font-family 指定 文字 字体 的 类 型 ,如 宋体 .黑体 .Time New Roman 等 
font-size 指定 文字 的 大 小 ,通常 用 像素 值 表示 
font-style 定义 字体 的 风格 ,属性 值 有 normal ,italic oblique .inherir 
poll 设置 字体 的 粗细 ,属性 值 有 normal、bold、bolder,lighter、100 一 900, 数 值 越 大 ,加 粗 的 


程度 越 高 





font-variant 


设置 文本 中 所 有 的 小 写字 母 均 会 被 转换 为 大 写 。 属 性 值 有 normal( 默 认 值 ) 、small- 
caps( 显 示 小 型 大 写字 母 ) inherit( 继 承 父 元 素 的 该 属性 
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color 





设置 字体 颜色 ,属性 值 可 以 是 颜色 名 称 、 十 六 进 制 和 RGB 代码 等 


以 上 列 出 的 这 些 属性 都 是 字体 样式 设置 中 常用 的 属性 。 但 这 些 属性 都 是 将 字体 的 各 种 
样式 分 开 进 行 设置 的 。CSS 还 提供 了 字体 样式 设置 的 复合 属性 font 属性 。font 属性 可 以 
一 次 性 设置 多 个 属性 值 来 定义 字体 样式 .其 格式 如 下 : 





{font:font- style font-variant font- weight font- size font- family} 


第 3 章 CSS 层 登 样式 表 





字体 复合 属性 font 中 属性 值 排列 顺序 为 font-style、font-variant, font-weight,font-size 
和 font-family, 各 属性 值 之 间 用 空格 隔 开 。 如 果 font-family 属性 值 有 多 个 , 则 使 用 逗号 *,” 
分 隔 。 属 性 font 的 属性 值 顺序 是 不 可 以 随意 调换 的 ,但 其 中 的 属性 值 可 以 省 略 不 写 , 但 不 
可 以 前 后 调换 顺序 。 值 得 注意 的 是 ,font-size 和 font-family 这 两 个 属性 值 不 可 省 略 ,否则 
font 属性 所 设置 的 样式 规则 可 能 会 被 忽略 。 
2. 段落 属性 
段落 的 应 用 在 网 页 中 也 是 常见 的 ,是 文章 的 组 成 部 分 。 段 落 的 放置 与 显示 直接 影响 到 
了 页 面 的 布局 及 风格 。CSS 提供 了 一 些 文本 属性 对 段落 文字 进行 控制 , 见 表 3-4。 
表 3-4 段落 属性 及 描述 
属 性 描 述 
word-spacing 单词 之 间 的 间隔 ,只 针对 单词 有 效 , 对 中 文 词语 无 效 
letter-spacing 字符 间距 ,对 中 英文 均 有 效 
text-decoration | 设置 文字 的 修饰 ,属性 值 有 underline、overline,line-through blink .none 


文本 字体 的 大 小 写 转换 ,属性 值 有 none( 不 转换 ) 、capitalize( 每 个 单词 的 第 一 个 字母 
转换 成 大 写 ,其 余 不 转换 )、uppercase( 转 换 成 大 写 ) ,lowercase( 转 换 成 小 写 ) 

















text-transform 














text-align 文本 水 平 对 齐 方式 ,只 能 用 于 文本 块 ,不 能 独立 应 用 于 图 像 标签 一 img 二 
text-indent 文字 缩 进 。 段 落 文字 通常 首 行 会 缩 进 两 个 字符 
line-height 设置 行 间 距 , 即 行 高 
设置 文本 间 空 白 的 处 理 方式 。 属 性 值 有 normal( 默 认 值 ,忽略 不 处 理 )、pre( 保 留 空 
white-space 白 ) .nowrap( 不 换行 ) ,pre-wrap( 保 留 空白 ,能 正常 换行 )、pre-line( 合 并 空白 ,保留 换 


行 符 ) .inherit( 继 承 父 元 素 的 该 属性 ) 





用 于 指定 文本 的 排列 方向 。 属 性 值 为 ltr 时 ,文本 的 方向 从 左 到 右 , 这 也 是 文本 排列 
的 默认 值 ;属性 值 为 rtl 时 ,文本 的 方向 从 右 到 左 


direction 





段落 属性 也 是 文本 样式 中 的 一 部 分 ,主要 设置 段落 文字 的 样式 。 这 些 属 性 的 应 用 主要 
完成 段落 文字 的 排版 及 显示 效果 ,使 整个 网 页 看 起 来 美观 大 方 ,能 够 吸引 更 多 的 访问 者 。 


3.1.4 背景 边框 样式 


打开 网 页 ,首先 映 入 眼帘 的 便 是 该 网 页 的 颜色 基调 及 样式 风格 。 不 同类 型 的 网 页 有 不 
同 的 设计 风格 。 背 景 是 网 页 样式 风格 中 的 一 个 重要 因素 。 本 节 将 介绍 背景 和 边框 的 样式 
设置 。 

1. 背景 属性 

很 多 网 站 主题 都 是 以 网 页 的 背景 为 样式 风格 的 。 背 景 的 设置 可 以 提高 网 页 的 视觉 性 ， 
吸引 不 少 访问 者 。CSS 样式 表 的 强大 表现 功能 对 背景 的 样式 设置 提供 了 一 些 属 性 , 见 
表 3-5。 

(1) background-color 属性 

background-color 属性 设置 页 面 的 背景 颜色 。 属 性 的 值 可 以 是 英文 的 颜色 名 称 ` 十 六 
进 制 编码 .RGB 值 .HSL 值 .HSLA 值 和 GRBA 值 。background-color 属性 可 以 设置 整个 
页 面 的 背景 颜色 ,也 可 以 设置 指定 的 某 个 HTML 标签 区 域 的 背景 颜色 。 





于 
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表 3-5 背景 属性 及 描述 


























属 性 描 述 
background-color 设置 背景 颜色 
background-image 设置 背景 图 片 
background-repeat 设置 背景 图 片 是 否 重 复 
background-attachment 设置 背景 图 片 的 显示 方式 
background-position 设置 背景 图 片 的 位 置 
background 复合 属性 ,可 以 一 次 性 指定 上 面 的 所 有 属性 


(2) background-image 属性 

background-image 属性 可 以 将 图 像 设 置 为 页 面 的 背景 图 片 。 值 得 注意 的 是 没有 任何 
方法 可 以 控制 背景 图 片 在 背景 设置 中 的 宽度 和 高 度 , 即 背景 图 片 有 多 大 的 尺寸 ,在 背景 区 域 
中 就 可 以 显示 多 大 的 尺寸 ,如 果 背 景区 域 大 于 背景 图 片 的 大 小 ,背景 图 片 则 默认 平 铺 背景 区 
域 ;如 果 背 景区 域 小 于 背景 图 片 的 大 小 ,背景 图 片 则 舍弃 一 部 分 不 显示 ,只 显示 背景 区 域 提 
供 的 大 小 。 因 此 ,如 果 想 要 将 背景 图 片 在 背景 设置 中 控制 预期 的 宽度 和 高 度 , 则 需要 预先 处 
理 好 该 图 片 ,通过 其 他 图 片 处 理工 具 预 先 将 图 片 处 理 好 。 另 外 ,背景 图 片 是 作为 区 域 的 背景 
显示 的 ,因此 不 存在 像 在 页 面 中 插入 图 片 那样 的 alt 属性 , 当 图 片 无 法 正常 显示 时 ,alt 属性 
提供 替换 的 文本 描述 。 因 此 ,背景 图 片 不 能 用 于 传达 任何 没有 在 页 面 上 使 用 文本 描述 的 

background-image 属性 和 background-color 属性 可 以 同时 设置 在 同一 个 HTML 标签 
区 域 中 ,但 显示 的 时 候 , 背 景 图 片 会 显示 在 背景 颜色 的 上 层 , 即 背景 图 片 会 遮挡 背景 颜色 的 
显示 。 

(3) background-repeat 属性 

background-repeat 属性 用 于 设置 背景 图 片 是 否 重复 平 铺 。 背 景 图 片 的 重复 平 铺 方式 
有 两 种 : 水 平 重复 乎 铺 和 垂直 重复 平 铺 。background-repeat 属性 及 描述 如 表 3-6 所 示 。 

表 3-6 ”background-repeat 属性 及 描述 


























属 性 描 述 
repeat 背景 图 片 既 水 平平 铺 又 垂直 平 铺 , 即 铺 满 整个 标签 区 域 
repeat-x 背景 图 片 水 平方 向 平 铺 
repeat-y 背景 图 片 垂直 方向 平 铺 
no-repeat 背景 图 片 不 重复 平 铺 





background-repeat 属性 重复 平 铺 图 片 是 从 标签 区 域 的 左上 角 开 始 按 水 平方 向 和 垂直 
方向 重复 铺 满 整 个 区 域 的 。 

(4) background-attachment 属性 

background-attachment 属性 用 于 设置 背景 图 片 的 显示 方式 。 当 一 个 页 面 过 大 ,而 背景 
图 片 又 不 能 完全 覆盖 整个 区 域 的 时 候 , 浏 览 页 面 会 出 现 看 不 到 背景 图 片 :或 是 开始 时 可 以 看 
见 , 但 滚动 页 面 就 看 不 见 背 景 图 片 的 情况 , 即 背 景 图 片 不 能 随 页 面 的 滚动 而 显示 。 
background-attachment 属性 就 是 用 来 设置 背景 图 片 是 否 随 页 面 深 动 而 显示 的 。 
background-attachment 属性 及 描述 如 表 3-7 所 示 。 
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表 3-7 background-attachment 属性 及 描述 











属 性 描 述 
scroll 默认 值 。 当 页 面 滚动 时 背景 图 片 随 页 面 一 起 滚动 
fixed 背景 图 片 固定 在 浏览 器 中 显示 页 面 的 可 见 区 域 


如 果 不 设置 background-attachment 属性 ,背景 图 片 固定 在 页 面 中 的 某 个 区 域 。 这 里 要 
区 分 设置 了 background-attachment 属性 值 为 fixed 时 的 情况 。 当 background-attachment 
属性 值 为 fixed 时 ,背景 图 片 固定 的 位 置 并 不 是 相对 于 页 面 的 ,而 是 相对 于 页 面 在 浏览 器 中 
的 可 见 区 域 。 而 不 设置 该 属性 时 ,背景 图 片 固定 的 位 置 是 相对 于 页 面 的 ,而 不 是 在 浏览 器 的 
可 见 区 域 。 

(5) background-position 属性 

background-position 属性 用 于 设置 背景 图 片 在 页 面 中 的 具体 位 置 。 它 的 属性 值 可 以 
是 : 绝对 定义 的 位 置 .百分比 定义 的 位 置 、 垂 直方 向 值 和 水 平方 向 值 。background-position 
属性 及 描述 如 表 3-8 所 示 。 





表 3-8 ” background-position 属性 及 描述 























属 性 描 述 

length 设置 位 置 的 水 平和 垂直 方向 的 具体 距离 长 度 , 单 位 可 以 为 cm ,mm'、px 等 
percentage 设置 标签 区 域 宽度 和 高 度 的 百分比 定义 的 背景 图 片 所 在 位 置 

top 设置 背景 图 片 在 垂直 方向 上 顶部 对 齐 

bottom 设置 背景 图 片 在 垂直 方向 上 底部 对 齐 

center 设置 背景 图 片 在 水 平和 垂直 方向 上 居中 对 齐 

left 设置 背景 图 片 在 水 平方 向 上 左 对 齐 

right 设置 背景 图 片 在 水 平方 向 上 右 对 齐 





background-position 属性 中 背景 图 片 的 位 置 设 置 可 以 同时 指定 水 平方 向 值 和 垂直 方向 
值 ,两 个 属性 值 用 空格 隔 开 。 水 平方 向 值 和 垂直 方向 值 除了 可 以 用 方向 定位 词 (left top、 
center、bottom 和 right) 外 ,还 可 以 用 具体 的 距离 数值 (length) 和 百分比 (percentage)。 

(6) background 复合 属性 

background 属性 是 一 个 复合 属性 ,可 以 一 次 性 设置 多 个 背景 属性 , 即 可 以 将 
background-color 属性 、background-image 属性 、background-repeat 属性 、background- 
attachment 属性 和 background-position 属性 一 起 设置 .中 间 用 空格 符号 隔 开 。 这 些 背 景 属 
性 值 可 以 按照 任何 顺序 排列 ,不 分 先后 。 属 性 值 的 排列 顺序 不 像 是 font 复合 属性 值 必 须 按 
照 一 定 的 顺序 排列 。 

2. 边框 属性 

所 谓 边框 ,就 是 将 内 容 和 间距 包含 在 内 的 边线 ,类 似 于 表格 的 外 边线 。 边 框 可 以 从 三 个 
方面 来 描述 : 样式 、 线 宽 和 颜色 。 边 框 属性 及 描述 如 表 3-9 所 示 。 
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表 3-9 边框 属性 及 描述 




















属 性 描 述 
border-style 设置 边框 的 样式 
border-width 设置 边框 的 线 宽 
border-color 设置 边框 的 颜色 
border 复合 属性 ,可 以 指定 上 面 所 有 的 边框 属性 


(1) border-style 属性 
border-style 属性 用 来 设置 边框 的 样式 风格 , 即 边 框 线 是 采用 实 线 、 虚 线 或 是 点 线 以 及 
双 实 线 等 。border-style 属性 及 描述 如 表 3-10 所 示 。 


表 3-10 ”border-style 属性 及 描述 
































属 性 描 述 

none 无 边框 

dotted 边框 样式 为 点 线 

dashed 边框 样式 为 虚线 

solid 边框 样式 为 实 线 

double 边框 样式 为 双 实 线 

groove 边框 样式 如 同 雕 刻 的 3D 凹 模式 边框 

ridge 3D 凸 醒 、. 背 线 式 边框 ,与 groove 边框 看 上 去 相反 
inset 3D 凹 和 内 嵌 式 边框 ,看 上 去 如 同 嵌 入 在 页 面 中 
outset 3D 凸 出 突出 式 边框 ,看 上 去 如 同位 于 画布 之 外 








一 个 边框 还 可 以 分 为 四 个 方向 上 的 边框 线 , 可 以 分 别 进行 边框 样式 设置 。 通 过 border- 
top-style 属性 设置 上 边框 线 的 样式 ;border-right-style 属性 设置 右边 框 线 的 样式 ;border- 
bottom-style 属性 设置 下 边框 线 的 样式 ;border-left-style 属性 设置 左边 框 的 样式 。 另 外 ,这 
四 个 方向 上 的 边框 样式 还 可 以 同时 设置 ,其 语法 格式 如 下 : 


border-style:dashed solid dotted double; 


将 四 个 边框 样式 设置 在 一 个 border-style 属性 中 ,中 间 用 空格 隔 开 。 按 照 顺 时 针 的 方 
向 分 别 定义 上 边框 、 右 边框 、 下 边框 和 左边 框 的 样式 。 

(2) border-width 属性 

border-width 属性 用 于 设置 边框 的 线 宽 , 通 常 使 用 像素 值 来 指定 宽度 。border-width 
属性 的 值 不 能 使 用 百分比 .除了 使 用 具体 的 数值 外 ,还 可 以 使 用 thin、medium 和 thick 这 三 
种 属性 值 。medium 是 默认 值 .thin 比 medium 细 ,thick 比 medium 粗 , 但 显示 的 实际 宽度 
还 取决 于 所 使 用 的 浏览 器 。 

border-width 属性 其 实 也 是 border-top-width、border-right-width、border-bottom- 
width 和 border-left-width 的 综合 属性 ,分 别 设 置 上 , 右 、 下 左边 框 线 的 宽度。 如 果 四 个 方 
向 上 的 框 线 宽度 都 设置 在 一 个 border-width 属性 值 中 , 则 按 顺 时 针 的 方向 对 上 、\ 右 、 下 \ 左 
边框 分 别 设置 框 线 的 宽度 。 

(3) border-color 属性 

border-color 属性 用 于 设置 边框 的 颜色 。 在 没有 设置 边框 样式 的 情况 下 ,默认 的 边框 颜 
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色 基 于 页 面 元 素 的 color 值 。 同 border-style 和 border-width 属性 一 样 ,border-color 属性 
可 以 为 边框 设置 一 种 颜色 ,也 可 以 同时 设置 四 个 边框 的 颜色 , 按 顺 时 针 方向 分 别 设置 上 、 右 、 
下 、 左 边框 的 颜色 。 也 可 以 单独 设置 某 一 边 上 的 边框 。border-top-color 属性 用 于 设置 上 边 
框 颜 色 ;border-bottom-color 属性 用 于 设置 下 边框 颜色 ;border-left-color 属性 用 于 设置 左 
边框 颜色 ;border-right-color 属性 用 于 设置 右边 框 颜 色 。 

(4) border 复合 属性 


border 











属性 是 一 个 复合 属性 ,集合 了 上 面 所 介绍 的 三 种 属性 。 其 格式 如 下 : 


border:border- style border-width border- color; 


border 


空格 隔 开 。 





属性 将 边框 框 线 样 式 、 框 线 宽度 、 框 线 颜 色 集合 在 一 起 进行 设置 ,属性 值 之 间 用 


三 个 属性 值 的 顺序 可 以 自由 调换 。 


3.1.5 列表 样式 
CSS 提供 了 用 于 控制 列表 样式 的 属性 ,如 表 3-11 所 示 。 





表 3-11 列表 属性 及 描述 

















属 性 描 述 
list-style-type 设置 列表 项 目 符号 或 编号 的 形状 或 外 观 显示 , 即 列表 项 目 符号 类 型 
list-style-position 设置 列表 项 目 符号 或 编号 的 位 置 显示 
list-style-image 指定 一 张 图 片 作 为 列表 的 项 目 符号 或 编号 
list-style 合 属性 ,可 以 同时 设置 列表 项 目 符号 或 编号 的 类 型 和 位 置 


1. list-style-type 属性 
list-style-type 属性 用 于 设置 列表 项 目 符号 或 编号 的 样式 。 对 于 无 序列 表 的 项 目 符号 
样式 设置 的 属性 值 说 明 如 表 3-12 所 示 。 


表 3-12 无 序列 表 的 list-style-type 属性 








属 性 描 述 属 性 描 述 
none 没有 项 目 符号 或 编号 circle 空心 圆 
disc( 默 认 值 ) 实心 圆 square 方块 











无 序列 表 使 用 的 是 项 目 符号 ,有 序列 表 使 用 的 是 编号 。list-style-type 属性 对 于 有 序列 
表 的 编号 样式 设置 的 属性 值 的 说 明 如 表 3-13 所 示 。 


表 3-13 有 序列 表 的 list-style-type 属性 




















属 性 描 述 
decimal 数字 ,如 1、2、3 
decimal-leading-zero 前 面 添加 0 的 数字 ,如 01.02.03 
lower-alpha 小 写字 母 , 如 a.b、c 
upper-alpha 大 写字 母 .如 A、B.C 
lower-roman 小 写 罗马 数字 ,如 i 





梧 


交互 式 Web 前 端 开 发 实践 

list-style-type 属性 可 以 用 于 无 序列 表 二 ul 二 标签 ,也 可 以 用 于 有 序列 表 二 ol 二 标签 ,还 
可 以 用 于 列表 项 二 li 二 > 标签。 

2.list-style-position 属性 

list-style-position 属性 用 于 设置 列表 项 目 符号 或 编号 的 位 置 显示 。 该 属性 具有 两 个 属 
性 值 : inside 和 outside, 如 表 3-14 所 示 。 


表 3-14 listrstyle-position 属性 及 描述 














属 性 描 述 
inside 项 目 符号 或 编号 在 文本 区 域内 左 侧 ( 缩 进 的 ) 
outside 项 目 符号 或 编号 在 文本 区 域外 左 侧 ( 默 认 值 ) 


【 例 3-1】 list-style-position 属性 的 两 个 属性 值 的 对 比 。 





程序 的 运行 结果 如 图 3-1 所 示 。 


。 list-style-position 属 性 值 为 inside 时 ， 项 目 符 
号 或 编号 在 文本 区 域内 左 侧 ( 缩 进 的 ) 。 


1. list-style-| 项 目 符 


左 侧 (默认 值 ) . 





图 3-1 list-style-position 的 两 个 属性 值 的 对 比 显示 效果 
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此 可 见 ,list-style-position 属性 所 定义 的 列表 文字 都 是 缩 进 的 , 当 属 性 值 为 inside 
时 ,项 目 符号 或 编号 所 在 的 位 置 在 列表 文本 区 域内 ; 当 属 性 值 为 outside 时 ,项 目 符号 或 编号 
所 在 的 位 置 在 列表 文本 区 域外 。 

3. list-style-image 属性 

list-style-image 属性 是 指定 一 张 图 片 作为 列表 的 项 目 符号 或 编号 。 属 性 值 是 图 片 的 源 
路 径 , 即 用 url 〇 方法 引入 使 用 图 片 的 路 径 。 如 果 使 用 的 是 租 套 的 列表 ,该 属性 将 继承 父 元 
素 的 list-style-image 属性 。 如 果 不 想 继承 该 属性 , 则 将 该 属性 值 设置 为 none 即 可 。 

4。 list-style 属性 

list-style 属性 是 列表 的 复合 属性 ,可 以 一 次 性 地 设置 列表 项 目 符号 或 编号 的 样式 类 型 
及 位 置 ,属性 值 之 间 用 空格 隔 开 。 属 性 值 无 先后 顺序 ,可 以 自由 调换 。 


3.1.6 其 他 样式 


还 有 几 个 常用 的 样式 属性 : cursor 属性 .display 属性 .visibility 属性 .overflow 属性 和 
opacity 属性 。 下 面 分 别 进行 介绍 。 

1. cursor 属性 

cursor 属性 是 一 种 鼠标 属性 ,可 以 指定 鼠标 光标 的 显示 类 型 。cursor 属性 及 描述 如 
表 3-15 所 示 。 





























表 3-15 cursor 属性 及 描述 
























































属性 描 述 

auto 默认 值 。 浏 览 器 设置 的 光标 

crosshair 十 字 线 光标 

default 通常 是 一 个 箭头 

pointer 手指 形 光标 ,通常 用 于 指示 链接 的 指针 

move 握 着 的 手 形 光标 ,如 正在 拖 放 某 个 对 象 时 的 光标 显示 

e-resize 此 光标 指示 矩形 框 的 边缘 可 被 向 右 ( 东 ) 移 动 

ne-resize 此 光标 指示 矩形 框 的 边缘 可 被 向 上 及 向 右 移 动 ( 北 / 东 ) 

nw-resize 此 光标 指示 矩形 框 的 边缘 可 被 向 上 及 向 左 移动 ( 北 / 西 ) 

n-resize 此 光标 指示 矩形 框 的 边缘 可 被 向 上 ( 北 ) 移 动 

se-resize 此 光标 指示 矩形 框 的 边缘 可 被 向 下 及 向 右 移动 ( 南 / 东 ) 

sw-resize 此 光标 指示 和 矩形 框 的 边缘 可 被 向 下 及 向 左 移动 ( 南 / 西 ) 

Ss-resize 此 光标 指示 和 矩形 框 的 边缘 可 被 向 下 移动 ( 南 ) 

w-resize 此 光标 指示 矩形 框 的 边缘 可 被 向 左 移动 ( 西 ) 

text 类 似 于 竖 线 ,指示 文字 的 内 容 

wait 指示 忙 ,正在 等 待 ,光标 通常 是 一 只 沙漏 的 显示 

help 指示 可 用 的 帮助 ,光标 通常 是 一 个 问号 或 气球 

| 自 定义 光标 图 像 文件 的 源 地 址 ,通常 在 此 列表 的 末端 始终 定义 一 种 普通 的 光标 ， 
以 防 没 有 由 URL 定义 的 可 用 光标 


其 中 用 得 最 多 的 就 是 pointer 属性 值 ,通常 把 一 些 不 是 手指 形 光 标 设置 为 可 以 指示 链接 
的 手指 形 光标 指针 ,提示 用 户 该 处 可 以 进行 点 击 操作 。 








2. display 属性 
display 属性 是 一 种 显示 属性 ,可 以 定义 元 素 的 显示 类 型 。display 属性 及 描述 如 表 3-16 
所 示 。 











表 3-16 display 属性 及 描述 














属 性 描 述 
none 此 元 素 不 会 被 显示 
block 此 元 素 将 显示 为 块 级 元 素 , 此 元 素 前 后 会 带 有 换行 符 
inline 此 元 素 会 被 显示 为 行内 元 素 , 元 素 前 后 没有 换行 符 
inline-block 行内 块 元 素 (CSS 2. 1 中 新 增 的 ) 





属性 值 block 是 以 块 级 元 素 的 方式 显示 ,inline 是 以 内 联 元 素 的 方式 显示 ,none 是 不 显 
示 ,inline-block 则 是 鉴于 行内 元 素 和 块 级 元 素 之 间 的 一 种 显示 效果 。 

什么 是 块 级 元 素 ? 什 么 是 行内 元 素 ? 

所 谓 块 级 元 素 ,就 是 这 类 元 素 应 用 在 HTML 页 面 中 ,显示 效果 会 成 为 独立 的 一 行 ,元 
素 前 后 自 带 换行 符 。 设 置 该 元 素 的 宽度 width 属性 、 高 度 height 属性 以 及 内 外 边 距 属性 是 
有 效 的 ,能 够 显示 出 设置 尺寸 大 小 的 元 素 区 域 。 

所 谓 行内 元 素 , 又 称 内 联 元 素 , 这 类 元 素 应 用 在 HTML 页 面 中 ,显示 效果 是 紧 跟 着 前 面 元 
素 的 后 面 显 示 ,不 会 换行 。 设 置 该 元 素 的 宽度 width 属性 、 高 度 height 属性 以 及 内 外 边 距 属 性 
是 无 效 的 ,只 能 显示 元 素 内 容 自 身 所 占 的 区 域 尺寸 大 小 ,不 会 显示 出 设置 尺寸 的 区 域 。 

display 属性 可 以 将 块 级 元 素 和 行内 元 素 进行 相互 转换 ,即将 块 级 元 素 display 属性 值 
设置 为 inline, 则 该 元 素 转换 成 了 行内 元 素 , 具 有 行内 元 素 的 特性 ;将 行内 元 素 display 属性 
值 设 置 为 block , 则 该 元 素 转换 成 了 块 级 元 素 , 具 有 块 级 元 素 的 特性 。 

行内 元 素 是 无 法 定义 宽 高 尺寸 。 对 行内 元 素 设 置 高 度 .宽度 .内 外 边 距 等 属性 都 是 无 效 
的 , 它 的 宽度 、 高 度 都 是 由 内 容 本 身 决定 的 。 当 将 一 个 内 联 元 素 ( 如 标签 二 a 二 ) 改 为 块 元 素 
后 ,该 元 素 具 有 块 级 元 素 的 特性 ,会 单独 占据 一 行 ,其 他 跟 在 它 的 后 面 的 元 素 会 被 迫 换行 , 转 
到 下 一 行 ,也 可 以 通过 设置 高 度 .宽度 .内 外 边 距 等 属性 来 调整 这 个 元 素 区 域 的 尺寸 大 小 。 

对 于 display 属性 值 设置 为 inline-block 的 元 素 ,自身 的 显示 效果 是 块 级 元 素 , 即 设置 宽 
度 ,高度 及 内 外 边 距 有 效 , 相 对 于 前 后 周围 的 元 素来 说 它 却 是 行内 元 素 , 具 有 行内 元 素 的 显 
示 效 果 , 即 该 元 素 前 后 不 会 换行 , 紧 挨 着 前 面 元 素 内 容 的 后 面 显示 该 元 素 的 内 容 。 

display 属性 可 以 设置 元 素 是 否 显示 出 来 。 属 性 值 设 置 为 none 则 不 显示 元 素 ,属性 值 
设置 为 block 则 将 元 素 显 示 出 来 并 具有 块 级 元 素 的 特性 。 

3. visibility 属性 

visibility 属性 设置 元 素 是 否 可 见 。visibility 属性 及 描述 如 表 3-17 所 示 。 

表 3-17 visibility 属性 及 描述 

















属 性 描 述 
visible 默认 值 ,将 元 素 设置 为 可 见 
hidden 将 元 素 设置 为 不 可 见 , 即 隐藏 
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当 将 visibility 属性 的 值 设 置 为 visible 时 .元 素 在 浏览 器 中 正常 显示 ; 当 将 visibility 属 
性 的 值 设置 为 hidden 时 ;元素 在 浏览 器 中 隐藏 内 容 . 但 是 该 元 素 不 影响 页 面 的 布局 , 即 这 时 
看 不 见 元 素 中 的 内 容 , 但 在 浏览 器 的 显示 位 置 会 看 到 元 素 所 占用 的 空白 区 域 。 也 就 是 说 
visibility 属性 设置 为 hidden 的 元 素 虽 然 在 页 面 中 不 显示 出 来 ,但 它 会 占据 一 定 的 位 置 区 
域 ,不 会 影响 页 面 的 布局 及 其 他 元 素 内 容 的 显示 。 

这 里 要 注意 区 分 display 属性 设置 隐藏 的 显示 效果 。 当 display 属性 的 值 设置 为 none 
时 ,该 元 素 被 完全 隐藏 ,不 占据 页 面 空间 。 该 元 素 所 在 页 面 中 的 位 置 会 被 后 面 的 元 素 内 容 填 
补 占据 。 而 visibility 属性 设置 为 hidden 时 ,虽然 看 不 见 内 容 , 却 可 以 看 见 该 内 容 在 页 面 中 
所 占据 的 空间 位 置 ,其 他 元 素 内 容 不 会 来 填补 该 区 域 。 

4. overflow 属性 

overflow 属性 规定 当 内 容 溢 出 时 发 生 的 事情 。overflow 属性 及 描述 如 表 3-18 所 示 。 


表 3-18 overflow 属性 及 描述 























属 性 描 述 

visible 默认 值 。 内 容 不 会 被 修剪 ,会 呈现 在 元 素 框 之 外 

hidden 内 容 会 被 隐藏 ,并 且 其 余 内 容 是 不 可 见 的 

scroll 内 容 会 被 修剪 ,但 是 浏览 器 会 显示 滚动 条 以 便 查看 其 余 的 内 容 

auto 根据 内 容 的 多 少 ,自动 决定 是 否 修剪 ,并 通过 深 动 条 查看 其 余 的 内 容 


扩展 用 法 : overflow-x 属性 值 和 overflow-y 属性 值 可 以 根据 水 平方 向 和 垂直 方向 单独 
规定 溢出 元 素 的 显示 方式 。 

S. opacity 属性 

opacity 属性 是 用 来 设置 透明 度 的 。 当 我 们 需要 对 某 些 元 素 表 现 为 半 透 明 效 果 时 ,需要 
使 用 opacity 属性 。 语 法 如 下 : 


GPacdityxz057 


opacity 属性 值 的 取 值 范围 为 0~1,1 表示 不 透明 ,0 表示 完全 透明 。 高 版 本 浏览 器 对 
opacity 已 经 有 了 很 好 的 支持 。 


3.2 CSS 3 基础 


3.2.1 CSS 3 新 增 特性 


1. 背景 属性 
在 CSS 3 中 新 增 了 一 些 用 来 控制 背景 图 片 在 区 域 中 的 显示 样式 属性 。 这 些 功能 在 CSS 
2 中 是 无 法 控制 实现 的 。 新 增 的 背景 属性 如 表 3-19 所 示 。 
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表 3-19 CSS 3 新 增 的 背景 属性 及 描述 





























属 描 述 
background-size 设置 背景 图 片 的 大 小 
background-origin 设置 背景 的 显示 区 域 
background-clip 设置 背景 图 像 的 裁剪 区 域 


(1) background-size 属性 

background-size 属性 用 于 设置 背景 图 片 的 大 小 。 在 前 面 章节 介绍 背景 属性 时 提 到 , 背 
景 图 片 的 大 小 是 不 可 控制 的 。 如 果 要 使 背景 图 片 的 尺寸 适应 标签 区 域 的 大 小 ,要 么 将 图 片 
预先 处 理 好 ,要 么 通过 平 铺 或 舍弃 一 部 分 来 达到 目的 。 在 CSS 3 中 ,通过 background-size 
属性 可 以 设置 背景 图 片 以 任何 尺寸 显示 ,而 不 是 以 重复 平 铺 或 舍弃 一 部 分 图 片区 域 来 适应 
标签 区 域 的 尺寸 。background-size 属性 及 描述 如 表 3-20 所 示 。 


表 3-20 background-size 属性 及 描述 



































属 性 描 述 
length 设置 背景 图 片 的 具体 尺寸 数值 ,单位 可 以 为 cm、mm、px 等 ,不 可 为 负 值 
percentage 设置 背景 图 片 的 百分比 尺寸 ,不 可 为 负 值 
cover 按 背 景 图 片 自身 的 宽 高 比例 缩放 到 正好 完全 和 米 盖 所 定义 的 标签 区 域 
a 保持 背景 图 片 自身 的 宽 高 比例 ,将 图 片 缩放 到 正好 适应 所 定义 的 标签 区 
域 的 宽度 或 高 度 





当 background-size 属性 值 设 置 为 百分比 时 ,背景 图 片 的 尺寸 大 小 由 所 定义 的 标签 区 域 
的 宽度 ,高度 以 及 background-origin 属性 的 位 置 决定 。background-size 属性 可 以 设置 2 个 
属性 值 , 中 间 用 空格 隔 开 。 第 1 个 值 表 示 设 置 的 背景 图 片 的 宽度 ,第 2 个 值 表 示 设 置 的 背景 
图 片 的 高 度 。 如 果 只 设置 了 1 个 值 , 则 第 2 个 值 默 认为 auto, 即 高 度 根据 宽度 的 设置 及 自身 
的 宽 高 比例 而 定 。 

(2) background-origin 属性 

background-origin 属性 指定 背景 图 片 的 定位 方式 。background-position 属性 总 是 以 标 
签 区 域 左上 和 角 为 坐标 原点 进行 的 定位 。 而 background-origin 属性 可 以 改变 这 种 定位 方式 。 
background-origin 属性 及 描述 如 表 3-21 所 示 。 

表 3-21 background-origin 属性 及 描述 


























属 性 描 述 

border 从 border 区 域 开 始 显示 背景 图 片 
padding 从 padding 区 域 开始 显示 背景 图 片 
content 从 content 区 域 开 始 显示 背景 图 片 

















(3) background-clip 属性 

background-clip 属性 用 来 设置 背景 图 片 的 裁剪 区 域 。background-clip 属性 及 描述 如 
表 3-22 所 示 。 
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表 3-22 ” background-clip 属性 及 描述 



























































属 性 描 述 
border 从 border 区 域 开始 显示 背景 图 片 
padding 从 padding 区 域 开始 显示 背景 图 片 
content 从 content 区 域 开始 显示 背景 图 片 
no-clip 从 边框 区 域外 裁剪 背景 
background-clip 属性 与 background-origin 属性 有 些 类 似 。 也 就 是 说 ,background-clip 





属性 用 来 判断 背景 是 否 包 含 边框 区 域 ,而 background-origin 属性 用 来 决定 background- 
position 属性 定位 的 参考 位 置 。 

(4) 多 背景 图 片 

CSS 3 允许 同时 指定 多 个 背景 图 片 , 这 些 背景 图 片 会 依次 覆盖 在 页 面 元 素 的 背景 上 。 
CSS 3 并 没有 为 多 背景 图 片 提供 额外 的 属性 ,多 背景 图 片 依然 是 通过 background-image、 
background-repeat、background-position、background-size 等 属性 来 控制 的 ,格式 如 下 : 








background- image:url (image/snow.gif),url (image/face.gif),url (image/sky.gif); 
background- repeat :repeat, repeat-x, repeat—y; 
background-position:left top, center top, left top; 


CSS 3 允许 在 一 个 属性 中 指定 多 个 属性 值 ,中 间 用 逗号 隔 开 。 

2. 边框 属性 

在 CSS 3 中 ,新 增 了 一 些 对 于 边框 样式 设置 的 属性 ,如 圆 角 边 框 ` 图 片 边框 等 。 这 在 
CSS 2 中 都 是 会 花费 大 量 的 时 间 和 精力 才能 实现 的 。 但 在 CSS 3 中 能 轻松 地 实现 。 

(1) 圆 角 边框 

在 CSS 3 中 ,使 用 border-radius 属性 来 设置 边框 的 圆 角 显示 效果 ,格式 如 下 : 


border-radius:length; 


属性 值 用 一 个 长 度数 值 来 表示 设置 圆 角 的 半径 ,半径 越 大 , 圆 角 的 程度 越 大 。 属 性 值 也 
[以 设置 为 none, 表 示 无 圆 角 , 即 边框 是 直角 边框 。 属 性 值 不 能 是 一 个 负 值 。 
border-radius 属性 的 值 可 以 设置 1 个 值 ': 也 可 以 设置 2 个 值 ,2 个 值 中 间 用 斜 杠 "/ 符 
号 隔 开 。 当 设置 为 1 个 值 时 ,表示 边框 的 4 个 圆 角 半径 相同 , 且 每 个 圆 角 都 是 1/4 个 圆 形 。 
当 设 置 为 2 个 值 时 ,第 1 个 值 表示 圆 角 的 水 平 半径 ,第 2 个 值 表示 圆 角 的 垂直 半径 , 即 每 个 
列 角 并 不 是 1/4 个 圆 形 。 第 2 个 值 与 第 1 个 值 相同 时 ,就 和 只 设置 1 个 值 时 呈现 一 样 的 圆 
角 显 示 效 果 。 

【 例 3-2】 指定 两 个 圆 角 半径 。 


引 




































































<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
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程序 的 运行 结果 如 图 3-2 所 示 。 





3-2 ”具有 两 个 半径 的 圆 角 边框 的 显示 效果 


由 此 可 见 ,第 一 个 圆 角 边框 的 半径 设置 了 一 个 属性 值 ,每 个 圆 角 是 一 个 圆 形 的 1/4; 第 
二 个 圆 角 边框 设置 了 两 个 属性 值 ,每 一 个 圆 角 实际 上 是 椭圆 的 一 部 分 。 

border-radius 属性 的 值 还 可 以 为 其 赋予 一 组 值 。 这 一 组 值 之 间 的 间隔 用 空格 隔 开 ,可 
以 包含 2 一 4 个 属性 值 。 这 里 要 注意 区 分 用 斜 杠 "/ ”符号 隔 开 的 2 个 属性 值 的 情况 : 用 斜 杠 
“7 符号 隔 开 的 表示 圆 角 的 水 平和 垂直 半径 。 而 这 一 组 值 中 包含 的 2 个 属性 值 的 情况 是 用 
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空格 隔 开 , 且 这 一 组 属性 值 是 不 能 使 用 斜 杠 " /符号 定义 圆 角 的 水 平和 垂直 半径 。 这 一 组 属 
性 值 的 赋值 情况 如 表 3-23 所 示 。 


表 3-23 borderradius 属性 赋值 个 数 描述 














属性 值 个 数 描述 
2 第 一 个 值 表 示 左 上 角 、 右 下 角 的 半径 ,第 二 个 值 表示 右上 角 、 左 下 角 的 半径 
3 第 一 个 值 表示 左上 角 的 ,第 二 个 值 表示 右上 角 和 左下 角 的 ,第 三 个 值 表示 右 下 角 的 
| 第 一 个 值 表示 左上 角 的 ,第 二 个 值 表示 右上 角 的 ,第 三 个 值 表示 右 下 角 的 ,第 四 个 值 
表示 左下 角 的 
【 例 3-3】 定义 一 组 值 的 圆 角 半径 。 





程序 的 运行 结果 如 图 3-3 所 示 。 
由 此 可 见 ,border-radius 属性 还 有 一 些 衍生 属性 ,如 表 3-24 所 示 。 
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图 3-3 具有 一 组 属性 值 的 圆 角 边框 的 对 比 显示 效果 


表 3-24 ”border-radius 的 衍生 属性 及 描述 








属 性 描 述 属 性 描 述 
border-top-left-radius 定义 左上 角 圆 角 border-bottom-left-radius 定义 左下 角 圆 角 
border-top-right-radius 定义 右上 角 圆 角 border-bottom-right-radius 定义 右 下 角 圆 角 











(2) 渐变 颜色 边框 

CSS 3 提供 了 一 些 渐变 颜色 的 边框 属性 ,. 即 border-top-colors 属性 、border-bottom- 
colors 属性 ,border-left-colors 属性 和 border-right-colors 属性 ,设置 边框 的 宽度 为 Npx, 就 
可 以 设置 N 种 颜色 ,每 种 颜色 显示 lpx 的 宽度 。 如 果 设 置 的 颜色 数 小 于 边框 的 宽度 ,最 后 
一 个 颜色 覆盖 剩 下 的 所 有 宽度 。 这 里 的 渐变 颜色 边框 属性 不 能 简写 成 border-colors。 

渐变 颜色 边框 属性 目前 只 有 Firefox 浏览 器 支持 :而且 使 用 时 必须 在 前 面 加 -moz- 前 组 。 
其 语法 格式 如 下 : 


—moz-border-top- colors:#555 #666 #777 #888 #999 #aaa #bbb #ccc #ddd #eee; 
【 例 3-4】 定义 渐变 颜色 边框 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 渐 变 颜色 边框 < /title> 
<style> 

-box{ 
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width:200px; 

height :80px; 
border-width:15px; 
border- style:solid; 
—moz-border- top—- colors:#555 #666 #777 #888 #999 #aaa #bbb #ccc #ddd #eee; 
-moz- border-bottom- colors:#555 #666 #777 #888 #999 #aaa #bbb #ccc #ddd 


#eee; 


—moz-border- left- colors:#555 #666 #777 #888 #999 #aaa #bbb #ccc #ddd #eee; 
—moz-border- right- colors:#555 #666 #777 #888 #999 #aaa #bbb #ccc #ddd #eee; 


} 
</style> 
</head> 
<body> 


<div class="box"></div> 


</body> 
</html> 


程序 的 运行 结果 如 图 3-4 所 示 。 


(3) 图 片 边框 





$$ | OD fileVW/EV ( 交 5 式 


图 3-4 渐变 颜色 边框 的 显示 效果 





在 CSS 3 中 新 增 了 一 个 border-image 属性 , 用 来 控制 边框 图 片 。 该 属性 与 
background-image 属性 有 些 类 似 : 但 它 的 作用 更 强大 一 些 。 
border-image 属性 有 五 大 属性 值 .分 别 是 图 片 地 址 .图 片 切割 .图 片 宽度 .图 片 外 凸 和 图 
片 重复 。 这 就 形成 了 border-image 的 衍生 属性 , 见 表 3-25 。 
表 3-25 border-image 的 衍生 属性 及 描述 





属 性 


描 述 





border-image-source 


指定 边框 图 片 的 源 地 址 , 即 图 片 的 URL 





border-image-slice 


确定 如 何 裁剪 边框 图 片 





borderimage- width 


指定 边框 图 片 的 尺寸 ,实际 上 浏览 器 还 是 习惯 使 用 border-width 属性 来 实现 





border-image-outset 


指定 边框 图 片 向 边框 外 延伸 的 距离 





border-image-repeat 





指定 边框 图 片 的 重复 性 





border-image 属性 是 一 个 复合 属性 ,可 以 将 它 衍生 出 来 的 
值 之 间 用 空格 隔 开 即 可 。 








属性 值 一 次 性 一 起 设置 ,属性 
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border-image-source 属性 是 指定 用 来 设置 边框 图 片 的 源 地 址 ,通过 使 用 url() 调 用 图 
片 ,地 址 可 以 是 相对 地 址 ,也 可 以 是 绝对 地 址 。 属 性 值 还 可 以 设置 为 none, 即 不 使 用 图 片 
边框 。 

border-image-slice 属性 是 用 于 控制 如 何 裁剪 用 来 设置 边框 的 图 片 。 属 性 值 可 指定 1 一 
4 个 数值 或 百分比 ,将 图 片 按照 一 定 的 方向 切割 成 9 个 区 域 , 即 4 个 角 、4 条 边 和 中 间 部 分 。 
其 中 的 4 个 角 和 4 条 边 用 来 设置 边框 ,中 间 部 分 会 被 舍弃 且 不 显示 出 来 。 如 果 需 要 将 中 间 
部 分 显示 出 来 ,在 border-image-slice 属性 值 的 后 面 添 加 fill 后 级 , 即 在 属性 值 的 后 面 添加 
fill 标识 ,与 前 面 的 值 之 间 用 空格 隔 开 (如 border-image-slice:30 fill)。 其 实 , 把 中 间 部 分 显 
示 出 来 就 跟 使 用 图 片 作为 背景 有 些 类 似 了 ,但 也 有 区 别 : 图 片 边框 是 将 切割 下 来 的 图 片 分 
别 去 适应 边框 相对 应 区 域 的 尺寸 大 小 。 注 意 : 这 里 设置 属性 值 为 数值 时 ,不 能 添加 单位 , 且 
不 允许 是 负 值 。 如 图 3-5 所 示 , 展 示 了 border-image-slice 属性 裁剪 图 片区 域 的 示意 图 。 


left right 





















中 间 区 域 
指定 fil1 值 则 出 现 ， 理 则 为 空 


bottom 











图 3-5 裁剪 图 片区 域 示 意图 


再 举 个 例子 来 说 明 一 下 border-image-slice 属性 值 是 如 何 用 来 切割 图 片 的 。 如 “border- 
image-slice:10 20 30 40” 属 性 值 分 别 指定 了 切割 图 片 时 上 、 右 、 下 、 左 边框 的 像素 ,但 这 里 不 
能 使 用 单位 。 切 割 示意 图 如 图 3-6 所 示 。 





图 3-6 ”切割 方向 示意 图 
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border-image-slice 属性 值 为 1 个 值 时 ,表示 切割 的 图 片上 、 下 、 左 、 右 四 个 方向 的 像素 值 
相同 ; 当 为 2 个 值 时 ,第 1 个 值 表示 切割 的 图 片上 、 下 两 个 方向 的 像素 值 ,第 2 个 值 表示 切割 
的 图 片 左 、 右 两 个 方向 的 像素 值 ; 当 为 3 个 值 时 ,第 1 个 值 表示 切割 的 图 片上 方 的 像素 值 ,第 
2 个 值 表 示 切 割 的 图 片 左 、 右 两 个 方向 的 像素 值 ,第 3 个 值 表示 切割 的 图 片 下 方 的 像素 值 ; 
当 为 4 个 值 时 , 则 4 个 值 依次 按照 上 、 右 下 、 左 顺 时 针 方向 的 切割 图 片 像素 值 。 这 里 再 次 强 
调 ,border-image-slice 属性 的 值 不 能 添加 任何 单位 。 

【 例 3-5】 定义 一 个 图 片 边框 。 





程序 的 运行 结果 如 图 3-7 所 示 。 





3-7 ”图 片 边框 


border-image-slice 属性 值 不 允许 设置 为 负 值 , 如 果 设 置 了 负 值 或 者 设置 值 大 于 图 片 的 

高 度 或 者 宽度 ,都 会 用 100% 代 替 ;border-image-slice 属性 切割 的 区 域 有 可 能 会 重 芭 ,如 果 

右 切 和 左 切 的 值 之 和 大 于 或 等 于 图 片 的 宽度 ,那么 项 部 区 域 和 底部 区 域 为 空白 , 即 图 3-5 中 
的 5 和 7 这 两 个 区 域 会 成 为 空白 。 
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borderimage-width 属性 指定 图 片 边框 四 个 方向 上 的 像素 值 。 属 性 值 可 以 指定 1 一 4 个 
像素 值 .百分比 或 数字 。 当 属性 值 为 数字 时 表示 的 是 倍数 ,是 设置 的 border-width 的 倍数 。 
属性 值 还 可 以 是 auto。 

【 例 3-6】 定义 一 个 不 同 边框 宽度 值 的 图 片 边框 。 





程序 的 运行 结果 如 图 3-8 所 示 。 








3-8 不同 边 框 宽度 值 的 图 片 边框 


由 此 可 见 , 例 3-6 中 “border-image-width: 27px 2 10% 27px” 将 图 片 边框 宽度 的 上 
(top) 设 置 为 27 像素 , 右 (right) 设 置 为 border-width 的 2 倍 即 60 像素 ,下 (bottom) 设 置 为 
整个 区 域 高 (height 十 2Xborder 二 140(px)) 的 10% 即 14 像素 , 右 (left) 设 置 为 27 像素 , 因 
此 这 些 值 将 代替 30px 成 为 图 片 边框 的 各 个 边 的 宽度 值 。 

border-image-outset 属性 用 于 设置 图 片 边 框 向 边框 外 延伸 的 距离 。 属 性 值 可 以 指定 1 一 
4 个 像素 值 或 数字 ,分 别 代表 图 片 边 框 的 上 、 右 、\ 下 、 左 四 个 方向 边框 图 片 向 外 延伸 的 距离 。 
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【 例 3-7】 定义 一 个 图 片 边框 向 外 延伸 的 图 片 边框 。 





程序 的 运行 结果 如 图 3-9 所 示 。 





图 3-9 边框 向 外 延伸 的 图 片 边框 
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例 3-7 中 定义 了 两 个 大 小 相同 的 图 片 边框 ,第 2 个 增加 了 border-image-outset 属性 , 设 
置 为 2, 即 图 片 边 框 向 原 边 框 外 延伸 2 倍 距离 。 因 此 ,可 以 看 到 第 2 个 图 片 边框 的 上 边框 向 
上 延伸 了 2 倍 距离 。 原 本 的 边框 线 应 该 紧 挨 着 在 第 1 个 下 边框 的 下 面部 分 。border-image- 
outset 属性 的 展示 效果 如 图 3-10 所 示 。 





pF 人 .22242422 
党 起 > 
令 向 外 延伸 之 前 令 使 向 外 延伸 之 后 伟 
ti ii 记 县 
II 


3-10 ”border-image-outset 属性 示意 图 
border-image-repeat 属性 用 于 控制 边框 图 片 的 重复 性 。border-image-repeat 属性 及 描 
述 见 表 3-26。 
表 3-26 ”border-image-repeat 属性 及 描述 











属 性 描 述 
stretch 默认 值 , 拉 伸 图 片 进行 区 域 获 盖 
repeat 重复 平 铺 图 片 

round 取 整 平 铺 图 片 





border-image-repeat 属性 的 值 可 以 同时 指定 2 个 值 ,分 别 表示 横向 、 纵 向 的 覆盖 方式 。 
上 面 三 种 属性 值 的 显示 示意 图 如 图 3-11 所 示 。 
SD AMO PDD 


背景 图 片 拉 伸 多 背景 图 片 重 夏 3 背景 图 片 环绕 
CY E23 (repeat) (round) 


令 S 多 
HS SS SS 


3-11 border-image-repeat 属性 示意 图 


当 图 片 重复 方式 为 round 上 且 平 铺 时 ,最 后 一 个 边框 图 片 不 能 完全 显示 , 且 显 示 的 区 域 不 到 
图 片 的 一 半 时 ,就 不 显示 最 后 一 张 .然后 扩大 前 面 的 图 片 .使 它们 完全 覆盖 显示 区 域 ;如 果 最 后 
一 张 图 片 显示 超过 了 一 半 ,就 稍微 缩小 前 面 的 图 片 . 让 它们 能 完全 显示 并 铺 满 边框 区 域 。 

(4) 外 边框 

外 边框 属性 是 网 站 开发 人 员 为 了 向 用 户 强调 页 面 的 某 些 方面 ,通过 outline 属性 实现 的 
外 边框 显示 功能 ,通常 用 在 表单 控件 中 。 外 边框 (outline) 和 物理 边框 (border) 不 同 , 它 不 占 
用 页 面 布局 中 的 空间 ,因此 不 影响 页 面 的 整体 布局 。 外 边框 的 样式 像 是 总 是 浮 于 网 页 的 上 
层 ,超脱 出 了 网 页 这 个 平面 , 且 它 的 形状 不 必 是 矩形 的 。 外 边框 的 属性 及 描述 如 表 3-27 
所 示 。 
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表 3-27 外 边框 的 属性 及 描述 

















属 性 描 述 
outline-width 外 边框 线 的 宽度 
outline-style 外 边框 线 的 样式 
outline-color 外 边框 线 的 颜色 
outline 复合 属性 ,可 以 一 次 性 定义 外 边框 的 宽度 .样式 和 颜色 





值得 注意 的 是 ,外 边框 的 所 有 边 样式 都 是 相同 的 ,不 能 指定 不 同 边 为 不 同 的 样式 。 

outline-width 属性 指定 外 边框 线 的 粗细 ,属性 值 可 以 是 长 度 值 ( 数 值 十 单位 )、thin、 
medium 或 thick, 类 似 于 border-width 属性 。 

outline-style 属性 指定 外 边框 线 的 样式 ,属性 值 可 以 是 border-style 属性 的 属性 值 。 

outline-color 属性 指定 外 边框 线 的 颜色 ,属性 值 是 颜色 值 ,可 以 是 颜色 名 称 、 十 六 进 制 
颜色 或 RGB 值 ,类 似 于 border-color 属性 。 

outline 属性 是 一 种 复合 属性 ,属性 值 可 以 一 次 性 设置 外 边框 的 宽度 、 样 式 和 颜色 ,中 间 
用 空格 隔 开 ,并 且 属 性 值 之 间 可 以 采用 任何 顺序 排列 ,不 分 先后 顺序 。 

【 例 3-8〗 定义 外 边框 。 











<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 外 边框 < /title> 
<style> 
spant{ 
outline:solid #F63 Spx; 
} 
input{ 
outline-width:2px; 
outline- style:solid; 
outline- color:#6F3; 
} 
</style> 
</head> 
<body> 
<p> 请 输入 用 户 名 ,用 户 名 必须 是 手机 号 码 。< /p> 
<p> 请 输入 用 户 名 ,用 户 名 必须 是 <span> 手 机 号 码 </span>。</p> 
<input type="text"> 
<button> 提 交 < /button> 
</body> 
</html> 


程序 的 运行 结果 如 图 3-12 所 示 。 
通过 例 3-8 的 运行 效果 可 以 看 到 ,“ 手 机 号 码 ” 添 加 的 外 边框 并 没有 占 位 , 它 只 是 遮挡 住 
了 前 后 元 素 。 因 此 ,外 边框 不 占据 页 面 空间 ,不 影响 网 页 的 布局 。 表 单 控件 文本 框 的 外 边框 
通常 用 于 获取 焦点 时 , 即 当 单 击 鼠 标 并 进入 文本 框 , 从 而 可 以 输入 文本 时 , 则 显示 文本 框 的 
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图 3-12 外 边框 


外 边框 。 

3. 伪 类 

CSS 3 引入 了 一 些 在 选择 器 中 添加 的 伪 元 素 ,我 们 称 之 为 伪 类 。 其 实 ,CSS 2 中 也 可 以 
使 用 伪 类 ,只 是 支持 程度 有 一 定 的 限制 。 页 面 中 常用 到 的 伪 类 有 “”: focus”“: before” 和 


“:after”。 

(1)“;focus” 伪 类 

在 前 面 外 边框 中 我 们 提 到 了 获取 焦点 。“ :focus” 伪 类 就 是 元 素 获 取 焦 点 时 的 状态 。 在 
网 页 中 链接 和 表单 控件 能 够 接收 焦点 。 

通常 情况 下 , 当 一 个 元 素 获取 焦点 时 会 让 其 显示 的 样式 有 所 不 同 。 如 表单 控件 中 的 文 
本 框 , 当 文本 框 获 取 焦 点 时 会 显示 其 外 边框 ; 当 失 去 焦点 时 ,会 隐藏 外 边框 。 将 例 3-8 修改 
以 后 形成 “ :focus” 伪 类 的 用 例 。 

【 例 3-9】 定义 “;focus” 伪 类 。 





程序 的 运行 结果 如 图 3-13 和 图 3-14 所 示 。 
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请 输入 用 户 名 ， 用 户 名 必须 是 手机 号 码 。 请 输入 用 户 名 ， 用 户 名 必须 是 手机 号 码 。 


EJ Li jy 





图 3-13 未 获取 焦点 时 图 3-14 获取 焦点 时 


由 此 可 见 , 当 鼠 标 光标 移入 文本 框 中 能 够 在 文本 框 中 输入 文字 时 , 即 文本 框 获取 焦点 
时 ,显示 定义 的 元 素 * :focus" 伪 类 的 样式 。 

(2)“:before” 伪 类 、“:after” 伪 类 和 content 属性 

“:before” 伪 类 是 在 定义 的 元 素 之 前 添加 内 容 ,“:after" 伪 类 则 是 在 定义 的 元 素 之 后 添 
加 内 容 , 并 通过 content 属性 添加 。 

【 例 3-10】 在 段落 文字 前 面 添加 标题 ,在 后 面 添加 注释 。 
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伪 类 定义 “:before" 伪 类 是 在 定义 的 元 
素 之 前 添加 内 容 , “:after” 伪 类 则 是 在 定义 的 元 
素 之 后 添加 内 容 , 通过 content 属 性 添加 。 





3-15 “:before” 和 *“:after" 伪 类 在 元 素 之 前 和 之 后 添加 内 容 





由 例 3-10 中 可 以 看 见 “: before” 伪 类 用 于 元 素 内 容 之 前 ,“:after” 伪 类 用 于 元 素 内 容 的 
末尾 。 都 是 通过 样式 属性 content 添加 的 内 容 。content 属性 不 仅仅 可 以 添加 文本 内 容 , 还 
可 以 添加 其 他 的 内 容 , 如 通过 url() 添 加 图 片 或 其 他 文件 。 

4. 字体 阴影 属性 

CSS 3 为 字体 增加 了 阴影 属性 text-shadow, 可 以 设置 字体 的 阴影 显示 效果 。 其 语法 格 
式 如 下 : 











text—- shadow:xoffset yoffset radius color; 


或 者 
text—- shadow:color xoffset yoffset radius; 
这 两 种 语法 格式 都 是 正确 的 .指定 的 阴影 颜色 可 以 写 在 前 面 ,也 可 以 写 在 后 面 。text- 
shadow 属性 及 描述 见 表 3-28。 
表 3-28 text-shadow 属性 及 描述 














属 性 描 述 

color 指定 阴影 的 颜色 ,如 果 省 略 ,阴影 颜色 使 用 字体 颜色 作为 引用 颜色 
xoffset 指定 阴影 的 横向 偏 移 

yoffset 指定 阴影 的 纵向 偏 移 

radius 指定 阴影 的 模糊 半径 ,半径 越 大 则 越 模糊 





以 上 四 个 属性 值 同时 设置 在 属性 text-shadow 的 属性 值 中 ,每 个 属性 值 之 间 用 空格 
隔 开 。 
【 例 3-11】 定义 文本 的 阴影 显示 效果 。 


< !doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
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程序 的 运行 结果 如 图 3-16 所 示 。 


| € © fileW/E/ Eweb | CC 
| 





图 3-16 阴影 文本 


text-shadow 属性 还 可 以 设置 多 个 阴影 值 , 之 间 用 逗号 隔 开 。 
【 例 3-12】 定义 一 组 阴影 效果 的 文本 显示 。 





程序 的 运行 结果 如 图 3-17 所 示 。 
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本 


图 3-17 具有 多 个 阴影 的 文本 显示 





3.2.2 CSS 3 变形 设置 
CSS 3 新 增 了 可 以 使 元 素 的 显示 效果 发 生 一 定 变化 的 属性 transform。 在 以 往 的 样式 
设置 中 ,对 于 元 素 的 显示 通常 都 是 中 规 中 矩 的 矩形 显示 样式 ,如 果 要 设置 一 定 的 变形 ,通常 
都 是 用 图 片 实现 的 。transform 属性 可 以 设置 元 素 的 位 移 、 缩 放 、 旋 转 和 倾斜 后 的 显示 样式 。 
它 的 属性 值 采用 的 是 变形 函数 ,如 表 3-29 所 示 。 
表 3-29 transform 属性 及 描述 
属 性 描述 
translate(tx[ ,ty]) | 设置 横向 ,纵向 位 移 ,ty 省 略 时 默认 为 0 
scale(sx[ ,sy]) 横向 .纵向 上 的 缩放 比 。sy 可 省 略 , 如 省 略 sy, 则 上 默认 等 于 sx, 即 保持 纵横 比 缩放 
rotateCangle) 顺 时 针 旋 转 angle 角度 
SkewCsx[L,sy]) 沿 X 轴 倾斜 sx 角度 , 沿 Y 轴 倾斜 sy 角度 ,sy 省 略 则 默认 为 0 

















transform 属性 有 一 个 派生 出 来 的 属性 即 transform-origin 属性 ,用 于 设置 变形 的 中 心 
点 。 它 的 属性 值 可 以 是 left、top、right、bottom ,center 长度 值 或 者 百分比 ,分 别 表示 变形 中 
心 点 的 坐标 。 如 “transform-origin; left top;” 表 示 元 素 区 域 左 上 角 为 变形 的 中 心 点 。 

1. 位 移 

translate(tx[ ,ty]) 变 形 函 数 设 置 元 素 区 域 的 位 移 。 参 数 tx 表示 横向 位 移 , 可 以 设置 像 
素 值 或 百分比 , 正 值 向 右 位 移 , 负 值 向 左 位 移 ;参数 ty 表示 纵向 位 移 , 与 参数 tx 类似 ,可 以 
设置 像素 值 或 百分比 , 正 值 向 下 位 移 , 负 值 向 上 位 移 .省 略 时 ,默认 值 为 0. 即 纵向 上 不 发 生 
位 移 。 

2. 缩放 

scale(sx[ ,sy]) 变 形 函 数 设置 元 素 区 域 按 横 向 或 纵向 上 的 缩放 比例 。 参 数 sx 表示 横向 
上 的 缩放 比例 ,设置 某 个 具体 浮 点 数 表示 缩放 的 倍数 。 参 数 sy 可 以 省 略 ,省 略 情况 下 sy 的 
默认 值 等 于 sx, 即 在 保持 纵横 比例 相同 的 情况 下 进行 元 素 区 域 的 缩放 。 

3. 旋转 

rotate(angle) 变 形 函 数 设 置 元 素 区 域 按 照 顺 时 针 方 向 旋转 angle 角度 。 参 数 angle 是 
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一 个 角度 值 , 单 位 为 度 Cdeg) 。 一 个 圆 形 为 360deg。 

4. 倾斜 

skew(sx[ ,sy]) 变 形 函 数 设置 元 素 区 域 沿 X 轴 倾 斜 sx 角度 , 沿 Y 轴 倾 斜 sy 角度 ,参数 
sx 和 sy 都 是 一 个 角度 值 ,单位 为 度 (deg)。 参 数 sy 可 以 省 略 ,省 略 情况 下 默认 值 为 0, 即 不 
发 生 立 轴 的 倾斜 。 

transform 属性 可 以 同时 指定 多 个 变形 函数 ,中 间 用 空格 隔 开 。 例 如 : 


值得 注意 的 是 ,变形 函数 的 先后 顺序 会 直接 影响 变形 后 的 显示 效果 。 同 样 的 变形 函数 ， 
使 用 的 先后 顺序 不 同 , 得 到 的 效果 也 会 有 所 不 同 。 
【 例 3-13】 transform 属性 样式 的 变形 设置 。 





程序 的 运行 结果 如 图 3-18 和 图 3-19 所 示 。 
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图 3-18 矩形 未 变形 前 图 3-19 ” 答 形变 形 后 


这 里 定义 了 两 个 完全 相同 的 矩形 框 , 设 置 的 变形 函数 也 相同 ,只 是 前 后 顺序 有 所 不 同 ， 
得 到 的 变形 效果 却 是 完全 不 同 的 显示 样式 。 
提示 : 在 没有 指定 变形 中 心 坐 标的 情况 下 ,默认 的 变形 中 心 都 是 元 素 区 域 的 左上 角 。 


3.2.3 CSS 3 动画 设置 


CSS 3 中 新 增 了 简单 的 动画 设置 ,有 transition 动画 和 animate 帧 动画 。 下 面 分 别 进行 
介绍 。 

1 transition 动画 

transition 动画 通过 transition 属性 实现 ,transition 属性 及 描述 如 表 3-30 所 示 。 

表 3-30 ”transition 属性 及 描述 
属 性 描 述 

指定 元 素 的 CSS 属性 进行 平滑 渐变 处 理 。 可 以 指定 background-color、 
width ,height 等 各 种 标准 的 CSS 属性 


transition-duration 指定 属性 平滑 渐变 的 持续 时 间 


指定 渐变 的 速度 。 该 部 分 的 值 有 ease( 慢 一 快 一 慢 ) ,linear( 匀 速 ) .ease-in 
( 先 慢 后 快 )、ease-out( 先 快 后 慢 ) 


transition-delay 指定 延迟 时 间 ,该 属性 值 可 以 省 略 





transition-property 








transition-timing-function 








以 上 4 个 属性 值 可 以 一 起 设置 在 transition 属性 的 值 中 ,中 间 用 空格 隔 开 ,用 来 定义 
CSS 动画。 还 可 以 同时 指定 多 组 transition 的 属性 值 ,之 间 用 逗号 隔 开 。 
【 例 3-14】 实现 一 个 在 页 面 上 随 鼠 标 光标 漂移 的 气球 。 


< !doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
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程序 的 运行 结果 如 图 3-20 所 示 。 


ej © mcs el 


0 


图 3-20 ”transition 动画 





当 在 页 面 中 按 下 鼠标 左 键 ,气球 会 随 之 移动 过 来 。 
2. animate 帧 动画 
animate 帧 动画 是 通过 animation 属性 和 keyframes 定义 的 ,类 似 于 用 flash 实现 的 帧 动 


画 。animate 属性 及 描述 如 表 3-31 所 示 。 
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表 3-31 animate 属性 及 描述 
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属 性 描 述 
animation-name 指定 动画 名 称 
animation-duration 指定 动画 的 持续 时 间 
animation-timing-function 指定 动画 的 变化 速度 
animation-delay 指定 动画 的 延迟 时 间 , 可 以 省 略 
animation-iteration-count 指定 动画 的 循环 次 数 , 可 以 省 略 


animation-name 属性 用 于 定义 一 个 关键 帧 ,定义 格式 如 下 : 





其 中 ,from|to| 百 分 比 表 示 关 键 帧 的 位 置 。 还 可 以 设置 同时 改变 多 个 属性 的 动画 。 
【 例 3-15】 实现 一 个 动画 。 
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程序 的 运行 结果 如 图 3-21 所 示 。 


口 animate 由 动画 x 
所 了 C | @ file/WEV《 交 互 式 web 前 端 开发 实践 》/ 笔 三 章 /3-151 会 | ; 








图 3-21 例 3-15 的 执行 结果 
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当 鼠 标 光标 移入 DIV 区 域 , 则 显示 animate 帧 动画 的 显示 效果 。 目 前 只 有 chrome、 
opera,safari 浏览 器 支持 animate 属性 , 且 需 要 在 前 面 加 -webkit- 前 级 。Firefox 浏览 器 尚 不 
支持 该 属性 。 


3.3 布局 基础 


3.3.1 盒子 模型 


盒子 模型 是 CSS 中 非常 重要 的 核心 内 容 , 它 是 使 用 CSS 控制 页 面 元 素 的 外 观 显示 和 位 
置 定位 的 基础 。 网 页 文档 中 的 每 个 元 素 都 可 以 被 视 为 一 个 盒子 。 可 以 理解 为 ,网 页 布局 实 
质 上 就 是 将 大 大 小 小 的 各 种 不 同 的 盒子 通过 艇 套 来 进行 合理 的 摆 放 。 在 布局 的 过 程 中 , 值 
得 注意 的 是 盒子 实际 占 位 的 计算 和 是 否 兼容 浏览 器 等 问题 的 解决 。 一 个 标准 的 W3C 盒子 
模型 由 content (内容)、padding( 填 充 , 也 称 内 边 距 )、margin( 外 边 距 ) 和 border( 边 框 ) 这 
4 个 属性 组 成 ,如 图 3-22 所 示 。 
margin-top 
border-top 


padding-top 





content 


Jel-uIBreu 
Yal-3urpped 








WB3u-3uipped 
1U3u-19ploq 


193u-ulBreuu 





padding-bottom 


border-bottom 





margin-bottom 


图 3-22 盒子 模型 


程序 员 可 以 通过 生活 中 的 盒子 来 理解 样式 设置 中 的 盒子 模型 。content 就 是 盒子 里 装 
的 东西 ,盒子 一 定 会 有 宽度 和 高 度 ;盒子 外 壳 的 厚度 就 是 (border) 边 框 ;盒子 里 面 的 内 容 距 
盒子 的 边框 会 有 一 定 的 距离 ,这 就 是 内 边 距 (padding) ;而 盒子 与 盒子 之 间 的 距离 就 是 外 边 
距 Cmargin)。 下 面 分 别 进 行 介 绍 。 

1. 宽度 和 高 度 

width 属性 是 指 元 素 的 内 容 在 浏览 器 可 视 区 域 中 的 宽度 ,格式 如 下 : 


width: 像 素 值 /百分比 ; 





属性 值 可 以 指定 数值 (如 100px) 或 者 相对 于 父 元 素 的 百分比 (如 80%)。 这 里 的 width 
设置 的 值 与 单个 元 素 的 宽度 不 同 。 元 素 的 宽度 包括 元 素 的 内 容 、 内 边 距 ( 填 充 ) 、 边 框 和 外 边 
距 。 而 width 属性 只 为 内 容 (content) 实 际 的 宽度 。 
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height 属性 指 元 素 的 内 容 在 浏览 器 可 视 区 域 中 的 高 度 , 与 width 属性 类 似 , 属 性 值 可 以 
指定 数值 (如 900px) 或 者 相对 于 父 元 素 的 百分比 (如 60%)。 如 果 元 素 不 指定 高 度 , 元 素 的 
高 度 一 般 为 内 容 自 身 的 高 度 , 根 据 内 容 的 多 少 而 定 , 背 景 图 片 不 一 定 会 显示 完全 。 

2. 边框 

在 现实 生活 中 ,一 个 盒子 的 边框 具有 一 定 的 厚度 .颜色 和 样式 。 网 页 中 元 素 的 边框 
(border) 也 包含 同样 的 属性 ,具体 有 border-width( 边 框 的 厚度 ) border-style( 边 框 的 样式 ) 
和 border-color( 边 框 的 颜色 ) 等 属性 , 缺 一 不 可 。 在 CSS 3 中 ,还 可 以 为 边框 设置 圆 角 
(border-radius) 以 及 盒子 的 阴影 (box-shadow) 等 属性 。border 属性 前 面 介 绍 过 ,这 里 就 不 
再 次 述 。 

盒子 的 阴影 是 CSS 3 新 增 的 属性 ,在 前 面 我 们 介绍 过 文本 阴影 的 属性 。 盒 子 的 阴影 属 
性 与 文本 阴影 属性 类 似 。 语 法 格式 为 : 

















box- shadow:xoffset yoffset radius color inset/outset; 


其 中 ,参数 xoffset 为 X 轴 的 偏 移 位 置 ,是 一 个 像素 值 ;参数 yoffset 为 Y 轴 的 偏 移 位 
置 , 是 一 个 像素 值 ; 参 数 radius 表示 模糊 度 , 也 是 一 个 像素 值 ,数值 越 大 越 模 糊 ;参数 color 
是 设置 阴影 的 颜色 ;参数 inset/outset 是 设置 盒子 阴影 的 位 置 (内 阴影 /外 阴影 ) ,该 参数 可 
缺 省 ,默认 状态 采用 的 是 外 阴影 。 应 用 如 下 : 


box- shadow: 5px 5px 7px #000 inset; 


3. 内 边 距 

内 边 距 是 内 容 (content) 与 边框 (border) 之 间 的 距离 ,分 为 上 、 右 \ 下 、 左 4 个 方向 上 的 距 
离 。 语 法 为 : 

padding: 属 性 值 ; 

属性 值 的 取 值 可 以 是 像素 (px)、 厘 米 (cm) ,也 可 以 是 百分比 (%), 但 不 允许 为 负 值 。 取 
值 个 数 可 以 是 1 一 4 个 。 取 值 为 1 个 时 表示 4 个 方向 的 内 边 距 都 相同 ;2 个 时 分 别 表示 上 下 


和 左右 的 距离 ;3 个 时 表示 依次 为 上 、 左 、 右 、 下 的 距离 ;4 个 时 则 表示 按 顺 时 针 方 向 上 、 右 、 
下 、 左 各 边 的 内 边 距 。 例 如 : 


padding:5px; /* 上 下 , 左 、 右 的 内 边 距 都 是 5 像素 * / 
padding:5px 10px; /x* 上 、 下 的 内 边 距 是 5 像素 , 左 、 右 的 内 边 距 是 10 像素 * / 
padding:5px 10px 15px; /* 上 方 的 内 边 距 是 5 像素 , 左 、 右 的 内 边 距 是 10 像素 ,下 方 


的 内 边 距 是 15 像素 * / 
padding:5px 10px 15px 20px; /x* 上 方 的 内 边 距 为 5 像素 , 右 方 的 内 边 距 为 10 像素 ,下 方 的 
内 边 距 为 15 像素 , 左 方 的 内 边 距 为 20 像素 * / 


4. 外 边 距 
外 边 距 与 内 边 距 一 样 ,同样 分 为 上 、 右 、 下 、 左 4 个 方向 的 距离 ,只 是 它 是 盒子 与 盒子 之 
间 的 距离 。margin-top 为 元 素 距 离 顶 边 元 素 之 间 的 距离 :marginrright 为 元 素 距 离 右 边 元 
素 之 间 的 距离 ;margin-bottom 为 元 素 距离 底 边 元 素 之 间 的 距离 ;margin-left 为 元 素 距离 左 
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边 元 素 的 距离 。 语 法 与 内 边 距 一 样 . 但 不 同 的 是 , margin 的 属性 值 可 以 设置 为 负 值 。 
margin 的 属性 值 取 值 个 数 可 以 为 1~4 个 ,每 种 取 值 方式 同 padding 一 样 ,不 再 袭 述 。 

盒子 模型 中 ,要 理解 一 个 元 素 的 实际 占 位 宽度 和 高 度 是 如 何 计 算 的 。 元 素 实 际 在 页 面 
中 所 占 的 总 宽度 如 下 : 总 宽度 一 内 容 设置 的 本 身 宽度 (width) 十 元 素 的 边框 厚度 (border- 
width) 十 元 素 的 内 边 距 (padding) 十 元 素 的 外 边 距 (margin)。 父 元 素 所 指定 的 宽度 一 定 不 
能 小 于 它 里 面 所 有 子 元 素 占 位 累加 起 来 的 宽度 ,否则 排版 会 错位 。 同 理 , 元 素 实际 在 页 面 中 
所 占 的 总 高 度 为 : 总 高 度 王 内 容 设 置 或 本 身 的 宽度 (height) 十 元 素 的 边框 厚度 (border- 
width) 十 元 素 的 内 边 距 (padding) 十 元 素 的 外 边 距 Cmargin) 。 对 这 个 计算 的 理解 ,在 布局 中 
尤为 重要 。 


3.3.2 布局 方式 


CSS 的 定位 与 显示 属性 可 以 把 一 个 HTML 元 素 定 位 在 网 页 中 的 任何 位 置 。 定 位 与 布 
局 密切 相关 。 布 局 中 常用 的 定位 方式 有 标准 流 定 位 、 相 对 定位 、 绝 对 定位 和 浮动 定位 , 男 加 
一 个 设置 元 素 显示 的 层 释 顺序 的 z-index 属性 。 下 面 分 别 进行 介绍 。 

1. 标准 流 定位 

根据 盒子 模型 ,网 页 是 由 多 个 元 素 组 成 的 ,在 没有 为 HTML 元 素 添加 任何 与 定位 相关 
属性 的 前 提 下 ,浏览 器 会 根据 各 个 元 素 在 HTML 文档 中 出 现 的 顺序 , 自 上 而 下 进行 排列 显 
示 。 描 述 得 形象 一 点 ,可 以 把 这 样 的 方式 称 作 * 流 ”, 即 常 说 的 标准 流 。 也 就 是 说 标准 流 定位 
显示 的 位 置 由 元 素 在 HTML 文件 中 的 位 置 决定 。 

标准 流 定位 是 默认 的 网 页 布局 方式 。 当 删除 其 中 的 某 个 元 素 时 ,下 面 的 元 素 会 自动 上 
移 ,填补 删除 的 空间 。 块 级 元 素 、 行 内 元 素 依 据 自己 的 显示 属性 按照 在 文档 中 的 先后 次 序 依 
次 显示 。 如 果 是 块 级 元 素 , 就 从 上 到 下 一 个 接 一 个 地 排列 ,行内 元 素 就 在 行 中 水 平 布置 ,有 
幅 套 关系 也 会 显示 出 来 。 除 非 有 特殊 的 指定 ,否则 所 有 的 元 素 都 在 普通 流 中 定位 。 

2. 相对 定位 

相对 定位 (position: relative) 是 一 个 比较 容易 掌握 的 概念 。 相 对 定位 是 相对 于 自身 在 
标准 流 中 的 位 置 ( 以 元 素 左上 角 为 初始 点 ) 进 行 垂直 或 水 平 位 置 上 `. 下 \ 左 ` 右 的 偏 移 , 然 后 元 
素 就 会 改变 自己 的 位 置 ,而 移动 到 重新 定义 的 位 置 上 。 例 如 : 

















position:relative; 
left:30px; 
top:20px; 


元 素 相对 于 自己 的 左上 角 向 下 偏 移 20px, 向 右 偏 移 30px。 需 要 注意 的 是 ,设置 了 相对 
定位 的 元 素 不 仅 偏 移 了 某 个 距离 ,并且 还 占据 着 自己 原本 所 占有 的 空间 ,可 能 会 影响 其 他 元 
素 的 显示 。 

如 图 3-23 所 示 , 对 Box 2 进行 了 相对 定位 ,向 右 移动 20px. 向 下 移动 20px, 并 且 保 留 了 
自己 原本 的 位 子 , 但 Box 3 的 位 置 并 没有 受到 任何 影响 ,只 是 内 容 被 Box 2 遮挡 了 。 

3. 绝对 定位 

绝对 定位 与 相对 定位 不 同 , 对 元 素 进行 绝对 定位 ,参照 的 元 素 位 秆 是 该 元 素 的 父 级 乃至 
祖先 级 元 素 ,如果 元 素 没有 已 定位 的 祖先 元 素 , 则 会 参照 body 元 素 的 最 左上 和 角 来 定义 。 绝 
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上 Containing Element 


3-23 ”相对 定位 


对 定位 使 元 素 的 位 置 与 标准 流 无 关 , 因 此 不 占据 空间 。 绝 对 定位 可 以 把 某 个 元 素 精确 地 定 
位 在 页 面 的 某 个 位 置 ,使 元 素 的 位 置 与 文档 流 无 关 , 因 此 不 占据 标准 流 中 的 空间 ,对 于 普通 
文档 流 中 的 其 他 元 素 的 布局 ,绝对 定位 的 元 素 就 像 不 存在 一 样 。 绝 对 定位 的 元 素 的 位 置 是 
相对 于 最 近 的 已 定位 的 父 元 素 而 言 的 。 如 : 


position:absolute; 
left:30px; 
top:20px; 


图 3-24 所 示 为 参照 Box 2 的 父 级 元 素 (body) 的 左上 角 ( 必 须 是 定义 了 定位 属性 的 ) 向 


右 偏 移 20px, 向 下 偏 移 20px。 但 是 原本 在 中 间 的 Box 2 会 完全 脱离 标准 流 文档 ,并 且 影 响 
了 后 面 一 个 元 素 Box 3 的 显示 位 置 。 





图 3-24 绝对 定位 


固定 定位 (position:fixed) 是 绝对 定位 的 一 种 特殊 情况 ,与 绝对 定位 相似 ,唯一 不 同 的 是 
绝对 定位 是 相对 于 已 有 定位 属性 的 父 元 素 区 域 的 左上 角 ,而 固定 定位 则 是 固定 在 浏览 器 的 
视 框 位 置 。 这 样 , 当 窗口 滚动 时 ,固定 定位 的 元 素 不 会 随 之 滚动 ,总 是 出 现在 屏幕 的 固定 
位 置 。 

4. 浮动 定位 

在 页 面 的 布局 中 经 常会 用 到 多 栏目 排版 或 图 文 混 排 的 结构 。float 属性 可 以 实现 布局 
中 的 多 栏目 并 排 及 文字 环绕 的 图 文 混 排 效果 。 

float 的 属性 及 描述 可 以 定义 成 如 表 3-32 所 示 。 
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表 3-32 float 的 属性 及 描述 

















属 性 描 述 

left 元 素 在 包含 框 中 向 左 浮动 ,包含 框 中 的 内 容 将 移动 到 它 的 右边 
right 元 素 在 包含 框 中 向 右 浮动 ,包含 框 中 的 内 容 将 移动 到 它 的 左边 
none 默认 值 。 元 素 不 浮动 ,会 按照 在 标准 流 文档 中 的 位 置 显示 
inherit 从 父 元 素 继承 float 属性 的 值 。IE 不 支持 该 属性 值 





设置 了 float 属性 的 元 素 是 独立 于 标准 流 定位 之 外 的 可 以 左右 移动 ,上 且 尽 可 能 远 地 放 置 

在 包含 框 ( 父 元 素 ) 的 边缘 或 另 一 个 设置 了 浮动 元 素 的 边缘 。 换 句 话 说 ,设置 了 浮动 的 元 素 ， 

将 不 再 处 于 标准 流 文 档 中 ,相当 于 浮 在 文档 之 上 ,不 占据 空间 但 会 缩短 行距 ( 即 浮动 元 素 要 

占据 文档 中 的 宽度 ,但 不 占据 高 度 ) , 且 可 以 左右 移动 ,直到 它 的 外 边缘 碰 到 包含 框 或 另 一 浮 

动 框 的 边缘 进行 定位 ,如 图 3-25 所 示 。 
No boxes floated 


Box 1 floated right 









浮动 定位 的 显示 效果 





任何 HTML 元 素 只 要 设置 了 float 属性 ,就 会 产生 浮动 ,并 且 元 素 的 性 质变 成 了 行内 块 
元 素 ( 即 元 素 拥有 了 "display:inline-block;” 的 特性 )。 但 对 于 标准 流 的 元 素来 说 ,浮动 元 素 
不 占 高 度 ,只 有 宽度 。 需 要 注意 的 是 ,浮动 元 素 必 须 设置 width 属性 ,用 于 指定 浮动 框 占用 
包含 框 的 宽度 ,否则 浮动 框 将 占 满 包含 框 宽度 的 100% ,不 会 为 浮动 元 素 周围 的 其 他 元 素 余 
留 空间 ,使 包含 框 像 是 空白 的 块 级 元 素 , 如 图 3-26 所 示 。 


i Box3 drops 


Box 3 gets “stuck” 
on Box 1 





图 3-26 ”浮动 元 素 包含 框 宽度 不 足 及 浮动 元 素 高 度 不 一 致 的 显示 效果 


当 使 用 浮动 定位 时 ,需要 考虑 包含 框 ( 父 元 素 ) 的 宽度 是 否 能 够 水 平 并 排 其 中 的 所 有 浮 
动 元 素 。 如 果 浮 动 元 素 的 总 宽度 超出 了 父 元 素 的 宽度 ,超出 的 浮动 元 素 会 向 下 移动 , 另 起 一 
行 按照 规则 进行 排列 。 如 果 浮 动 元 素 的 高 度 不 同 , 当 它们 向 下 移动 时 ,可 能 会 移动 到 包含 杠 
的 边缘 ,也 有 可 能 移动 到 另 一 浮动 元 素 的 边缘 ,如 图 3-26 所 示 。 
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使 用 浮动 定位 要 注意 的 两 点 。 

(1) 当 元 素 浮动 时 , 它 将 不 再 处 于 普通 文档 流 中 ,相当 于 浮 在 文档 之 上 ,不 占据 垂直 空 
间 , 但 是 会 缩短 行 框 ,产生 文字 环绕 的 效果 。 

(2) 当 元 素 浮动 时 , 它 可 以 左右 移动 ,直到 它 的 外 边缘 碰 到 包含 框 或 另 一 浮动 框 的 
边缘 。 

如 果 要 为 浮动 元 素 留 出 垂直 空间 ,使 其 他 的 元 素 不 在 其 两 侧 显示 ,可 以 对 其 周围 的 元 素 
使 用 清理 属性 clear 属性 。clear 的 属性 及 描述 如 表 3-33 所 示 。 

表 3-33 clear 的 属性 及 描述 















































属性 描述 属性 描 述 
left 该 元 素 的 左 侧 不 允许 有 内 容 none 默认 值 。 允 许 浮动 元 素 出 现在 两 侧 
right 该 元 素 的 右 侧 不 允许 有 内 容 both 该 元 素 的 两 侧 均 不 允许 有 内 容 


设置 了 clear 属性 的 元 素 ,通过 自动 增加 空白 边 ,达到 留 出 垂直 空间 的 效果 。 

5. z-index 属性 

z-index 属性 用 来 设置 元 素 的 层 释 顺序 。 当 元 素 设置 为 相对 定位 或 绝对 定位 时 ,经 常会 
出 现 元 素 之 间 相 互 重 释 的 现象 。 这 时 ,页面 不 再 是 一 个 平面 ,而 具有 了 层次 关系 ,有 多 个 层 
面 。 也 就 是 说 页 面向 空间 发 展 具 有 了 Z 轴 , 形 成 了 一 种 三 维 结构 。 默 认 情 况 下 ,元 素 的 层 
次 关系 为 第 一 个 元 素 位 于 后 面 元 素 的 下 方 , 即 在 结构 上 越 后 定义 的 元 素 越 在 上 层 。 在 页 面 
布局 中 如 果 要 打 乱 这 种 顺序 , 则 需要 z-index 属性 来 实现 。 

z-index 属性 只 能 用 在 具有 相对 定位 或 绝对 定位 的 元 素 上 才 有 效 。 它 的 属性 值 是 一 个 
数字 ,数值 越 大 ,元 素 越 位 于 上 层 。 

【 例 3-16】 实现 一 个 层 释 顺序 的 显示 效果 。 











<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>z-index 属性 </title> 


<style> 

divt{ 
width:200px; 
height:120px; 
position:absolute; 

} 

:box{ 
background:#F00; 
left:150px; 
top:20px; 
z-index:9; 

} 

-box2{ 
background:#FC3; 
left:100px; 
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.box3{ 
background:#F6F; 
left:50px; 
top:80px; 
z-index:1; 
} 
</style> 
</head> 
<body> 
<div class= "box">boxl</div> 
<div class= "box2">box2</div> 
<div class= "box3">box3</div> 
</body> 
</html> 


程序 的 运行 结果 如 图 3-27 所 示 。 


z-index 属性 x 


二 filey//E/ 《交互 式 web 前 浇 开 发 交 cl» 








图 3-27 用 zindex 属性 设置 层 秋 顺序 


例 3-16 中 如 果 按 文档 结构 顺序 , boxl 应 该 在 最 底层 ; box3 在 最 上 层 , 但 是 使 用 了 
z-index 属性 将 boxl 放 在 了 最 上 层 。 





3.4 ”综合 实例 


3.4.1 需求 分 析 


这 里 创建 一 个 Web 静态 页 面 的 综合 案例 ,将 对 第 2 章 和 第 3 章 的 知识 进行 总 结 ,并 将 
该 知识 运用 到 Web 页 面 中 。 下 面 以 图 3-28 为 例 ,完成 HTML 结构 和 CSS 样式 。 

分 析 : 页 面 制作 都 是 按照 从 上 往 下 、 从 左 往 右 的 方式 去 实现 的 。 根 据 这 种 方式 .上 例 中 
的 页 面 可 以 分 为 头 部 、 主 体内 容 和 版 权 三 部 分 ,各 部 分 再 从 上 往 下 、 从 左 往 右 依次 实现 即 可 。 
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图 3-28 综合 案例 


3.4.2 实现 源 代码 

实现 案例 中 的 页 面 效果 ,由 于 篇 幅 关系 ,下 面 只 列 出 了 部 分 的 源 代码 。 具 体 请 参考 案例 
资源 中 的 例 3-17。 

部 分 HTML 代码 。 





<div class="nav"> 
<div class="logo"></div> 
<ul> 
<1i class="on"> 首 页 </1i> 
<1i> 公 司 介绍 </1i> 
<1i> 供 应 产品 
<ul class="subnav"> 
<1i><a href="#"> 压 型 板 </a></1i> 
<li><a href="#"> 楼 承 板 </a></1i> 
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部 分 CSS 代码 。 





本 章 小 结 


本 章 主 要 介绍 了 层 释 样式 表 的 应 用 。 了 解 了 CSS 的 编写 规范 、 语 法 基础 及 如 何 运 用 到 
HTML 页 面 中 。 学 习 了 文本 样式 .背景 样式 ,边框 样式 列表 样式 及 其 他 一 些 常用 样式 的 设 
置 。 还 介绍 了 CSS 3 中 新 增 的 一 些 属性 及 变形 样式 和 动画 的 设置 。 最 后 介绍 了 Web 布局 
中 最 经 典 的 盒子 模型 以 及 常用 的 几 种 定位 方案 。 这 些 控制 页 面 内 容 显示 效果 和 位 置 定位 的 
层 倒 样式 表 实现 了 结构 与 样式 的 完全 分 离 。 
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4.1 _ JavaScript 概述 


JavaScript 是 一 种 属于 网 络 的 脚本 语言 ,是 一 种 基于 对 象 (Object) 和 事件 驱动 (Event 
Driven) 并 具有 安全 性 能 的 脚本 语言 。 已 经 被 广泛 用 于 Web 应 用 开发 ,常用 来 为 网 页 添加 
各 式 各 样 的 动态 功能 ,为 用 户 提供 更 流畅 美观 的 浏览 效果 。 它 是 通过 艇 入 或 调和 人 在 标准 的 
HTML 语言 中 实现 的 。JavaScript 与 HTML 超 文 本 标记 语言 .Java 脚本 语言 (Java 小 程 
序 ) 一 起 实现 在 一 个 Web 页 面 中 链接 多 个 对 象 ,与 Web 客户 交互 作用 ,从 而 可 以 开发 客户 
端的 应 用 程序 等 。 它 的 出 现 弥补 了 HTML 语言 的 缺陷 , 它 是 Java 与 HTML 折 中 的 选择 。 


4.1.1 JavaScript 的 特点 


1. 一 种 解释 性 执行 的 脚本 语言 
JavaScript 也 是 一 种 解释 性 语言 , 它 提供 了 一 个 非常 方便 的 开发 过 程 。JavaScript 的 语 


法 基本 结构 形式 与 CC++ ,Java 十 分 类 似 。 但 在 使 用 前 ,不 像 这 些 语言 需要 先 编译 ,而 是 在 
程序 运行 过 程 中 被 逐 行 地 解释 。JavaScript 与 HTML 标识 结合 在 一 起 ,从 而 方便 用 户 的 使 
用 操作 。 


2. 一 种 基于 对 象 的 脚本 语言 

JavaScript 也 可 以 被 看 作 一 种 面向 对 象 的 语言 ,这 意味 着 JavaScript 能 运用 其 已 经 创建 
的 对 象 。 因 此 ,许多 功能 可 以 来 自 脚本 环境 中 对 象 的 方法 与 脚本 的 相互 作用 。 

3. 一 种 简单 弱 类 型 的 脚本 语言 

JavaScript 的 简单 性 主要 体现 在 : 首先 ,JavaScript 是 一 种 基于 Java 基本 语句 和 控制 流 
之 上 的 简单 而 紧凑 的 设计 ,从 而 对 于 使 用 者 学 习 Java 或 其 他 C 语系 的 编程 语言 是 一 种 非常 
好 的 过 渡 ,而 对 于 具有 C 语系 编程 功底 的 程序 员 来 说 ,JavaScript 上 手 也 非常 容易 ;其 次 ,其 
变量 类 型 是 采用 弱 类 型 ,并 未 使 用 严格 的 数据 类 型 。 

4. 一 种 相对 安全 的 脚本 语言 

JavaScript 作为 一 种 安全 性 语言 ,不 允许 访问 本 地 的 硬盘 ,上 且 不 能 将 数据 存 人 服务 器 ， 
不 允许 对 网 络 文档 进行 修改 和 删除 ,只 能 通过 浏览 器 实现 信息 浏览 或 动态 交互 ,从 而 有 效 地 
防止 数据 的 丢失 或 对 系统 的 非法 访问 。 

5. 一 种 事件 驱动 脚本 语言 

JavaScript 对 用 户 的 响应 ,是 以 事件 驱动 的 方式 进行 的 。 在 网 页 (Web Page) 中 执行 了 
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某 种 操作 所 产生 的 动作 ,被 称 为 “事件 ”(Event)。 例 如 按 下 鼠标 ,移动 窗口 .选择 菜单 等 都 可 
以 被 视 为 事件 。 当 事件 发 生 后 ,可 能 会 引起 相应 的 事件 响应 ,执行 某 些 对 应 的 脚本 ,这 种 机 
制 被 称 为 事件 驱动 ”。 

6. 一 种 跨 平台 性 脚本 语言 

JavaScript 依赖 于 浏览 器 本 身 , 与 操作 环境 无 关 , 只 要 计算 机 能 运行 浏览 器 ,并 支持 
JavaScript 的 浏览 器 ,就 可 正确 执行 ,从 而 实现 了 “编写 一 次 , 走 遍 天 下 ”的 梦想 。 

因此 ,JavaScript 是 一 种 新 的 描述 语言 , 它 可 以 被 家 和 人 HTML 文件 中 。JavaScript 语言 
可 以 做 到 响应 使 用 者 的 需求 事件 (例如 表单 的 输入 ), 而 不 需要 任何 的 网 络 来 回 传输 资料 。 
所 以 当 一 位 使 用 者 输入 一 项 资料 时 ,此 资料 数据 不 用 经 过 传 给 服务 器 (Server) 处 理 再 传 回 
来 的 过 程 ,而 直接 可 以 被 客户 端 (Client) 的 应 用 程序 所 处 理 。 


4.1.2 JavaScript 的 优点 及 缺点 


1. JavaScript 的 优点 

(1) JavaScript 减少 网 络 传输 。 

在 JavaScript 这 样 的 客户 端 脚本 语言 出 现 之 前 ,传统 的 数据 提交 和 验证 工作 均 由 客户 
端 浏 览 器 通过 网 络 传输 到 服务 器 上 进行 。 如 果 数 据 量 很 大 ,这 对 于 网 络 和 服务 器 的 资源 来 
说 实在 是 一 种 无 形 的 浪费 ,而 使 用 JavaScript 就 可 以 在 客户 端 进行 数据 验证 。 

(2) JavaScript 方便 操纵 HTML 对 象 。 

JavaScript 可 以 方便 地 操纵 各 种 页 面 中 的 对 象 ,用 户 可 以 使 用 JavaScript 来 控制 页 面 中 
各 个 元 素 的 外 观 、 状 态 其 至 运行 方式 ,JavaScript 可 以 根据 用 户 的 需要 “定制 "浏览 器 ,从 而 
使 网 页 更 加 友好 。 

(3) JavaScript 支持 分 布 式 运算 。 

JavaScript 可 以 使 多 种 任务 仅 在 客户 端 就 可 以 完成 ,而 不 需要 网 络 和 服务 器 的 参与 ,从 
而 支持 分 布 式 的 运算 和 处 理 。 

2. JavaScript 的 局 限 性 

(1) 各 浏览 器 厂商 对 JavaScript 的 支持 程度 不 同 。 

目前 在 互联 网 上 有 很 多 浏览 器 ,如 Firefox、Internet Explorer、Opera 等 ,但 每 种 浏览 器 
支持 JavaScript 的 程度 是 不 一 样 的 ,不 同 的 浏览 器 在 浏览 一 个 带 有 JavaScript 脚本 的 主页 
时 ,由 于 对 JavaScript 的 支持 稍 有 不 同 ,其 效果 会 有 一 定 的 差距 ,有 时 甚至 会 显示 不 出 来 。 

(2)“Web 安全 性 ”牺牲 了 JavaScript 的 一 些 功能 。 

当 把 JavaScript 的 一 个 设计 目标 设 定 为 “Web 安全 性 ?时 ,就 需要 牺牲 JavaScript 的 一 
些 功能 。 因 此 ,纯粹 的 JavaScript 将 不 能 打开 、 读 写 和 保存 用 户 计 算 机 上 的 文件 。 它 有 权 访 
问 的 唯一 信息 就 是 该 JavaScript 所 嵌入 的 那个 Web 主页 中 的 信息 , 简 而 言 之 ,JavaScript 只 
存在 于 它 自 己 的 小 小 世界 一 一 Web 主页 里 。 


4.1.3 第 一 个 JavaScript 例子 


【 例 4-1】 创建 第 一 个 JavaScript 程序 。 
在 HHTML 网 页 上 加 入 以 下 代码 。 
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执行 以 上 代码 ,网 页 显示 如 图 4-1 所 示 。 


我 的 第 一 个 JavaScript 程序 





4-1 第 一 个 JavaScript 例子 


HTML 中 的 脚本 必须 位 于 二 script 二 与 二 /script 二 标签 之 间 。 脚 本 可 被 放置 在 
HTML 页 面 的 一 body 过 或 者 王 head 二 部 分 中 。 单 击 显示 日 期 按钮 ,结果 如 图 4-2 所 示 。 


我 的 第 一 个 JavaScript 程序 


Tue Dec 06 2016 20:53:46 GNT+0800 (中 国标 准时 间 ) 


4-2 创建 第 一 个 JavaScript 程序 显示 日 期 的 结果 





4.2 JavaScript 语法 


4.2.1 JavaScript 语句 


JavaScript 语句 是 向 浏览 器 发 出 的 命令 。 语句 的 作用 是 告诉 浏览 器 该 做 什么 。 
JavaScript 用 分 号 分 割 代 码 ,通常 在 每 条 可 执行 的 语句 结尾 添加 分 号 。 使 用 分 号 的 另 一 个 
作用 是 在 一 行 中 编写 多 条 语句 。 例 如 : 
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JavaScript 语句 通过 代码 块 的 形式 进行 组 合 。 代 码 块 由 左 花 括号 开始 ,由 右 花 括号 结 
束 。 代 码 块 的 作用 是 使 语句 序列 一 起 执行 ,JavaScript 函数 是 将 语句 组 合 在 块 中 的 典型 
例子 。 

【 例 4-2】 代码 块 。 





4.2.2 JavaScript 注释 


JavaScript 注释 可 用 于 提高 代码 的 可 读 性 。 
1. 单行 注释 

单行 注释 以 // 开 头 。 

【 例 4-3】 单行 注释 。 





2. JavaScript 多 行 注释 
多 行 注释 以 “/ x ”开始 ,以 “ * /” 结 尾 。 
【 例 4-4】 多 行 注释 。 





4.2.3 变量 与 常量 


JavaScript 命名 规则 : 使 用 短 名 称 ( 比 如 x 和 y), 也 可 以 使 用 描述 性 更 好 的 名 称 ( 比 如 
age\sum totalvolume) 。 另 外 ,遵循 以 下 原则 。 
(1) 变量 一 般 以 字母 开头 。 
(2) 变量 也 能 以 ”$ ”和 ”符号 开头 (不 过 不 推荐 这 么 做 ) 。 
(3) 变量 名 称 对 大 小 写 敏感 (y 和 Y 是 不 同 的 变量 ) ,JavaScript 语句 和 JavaScript 变量 
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都 对 大 小 写 敏感 。 
1. 变量 
我 们 使 用 var 关键 词 来 声明 变量 。 例 如 : 


Var Pi=3.147 
Var name="Bill Gates"; 


2. 常量 
我 们 使 用 const 来 定义 ,但 是 下 浏览 器 不 支持 const。 例 如 : 


const constantName=3.14; 


4.2.4 运算 符 


JavaScript 运算 符 与 其 他 语言 的 运算 符 类 似 。 

1. 算术 运算 符 

算术 运算 符 主要 用 来 进行 算术 运算 ,常用 的 算术 运算 符 如 表 4-1 所 示 。 
表 4-1 常用 的 算术 运算 符 
































运算 符 描述 实例 (y 一 5) 结 果 
+ 加 x 一 y 十 2 x 一 7 
> 减 x 二 x 一 2 x 一 3 
乘 x 一 xw2 x=10 
/ 除 x 一 x/2 x 一 2.5 
% 取 余 x=x%2 x 一 1 
Es 自 加 x 二 x 十 十 x=6 
自 减 x 一 x 一 一 x=4 
2. 赋值 运算 符 


赋值 运算 符 主 要 用 来 赋值 ,常用 的 赋值 运算 符 如 表 4-2 所 示 。 
表 4-2 常用 的 赋值 运算 符 




















运算 符 描 述 实 例 结 果 
三 直接 赋值 x 一 3 x 一 3 

十 一 先 加 再 赋值 x 十 一 3 x 一 x 十 3 
= 先 减 再 赋值 x 一 一 3 x 一 x 一 3 
Lb 先 乘 再 赋值 x* 一 3 x 一 xx3 
/= 先 除 再 赋值 x/=3 x 一 x/3 














3. 关系 运算 符 
关系 运算 符 主要 用 来 进行 比较 判断 ,常用 的 关系 运算 符 如 表 4-3 所 示 。 
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表 4-3 常用 的 关系 运算 符 
























































运算 符 描 述 结果 
ms 等 于 false 
dni 恒 等 于 ( 值 和 类 型 都 要 比较 ) false 
| i 不 等 于 true 
> 赤 于 false 
~ 小 于 true 
i 大 于 等 于 false 
ew 小 于 等 于 true 
4. 逻辑 运算 符 
逻辑 运算 符 主要 用 来 进行 迎 辑 判断 ,常用 的 逻辑 运算 符 如 表 4-4 所 示 。 
表 4-4 常用 的 逻辑 运算 符 
运算 符 描 述 实例 (x 一 5) 结 
&& 逻辑 与 (and) x>2&&x 一 9 true 
I 逻辑 或 (or) x>211x<0 true 
! 逻辑 非 , 取 逻 辑 的 反面 1(x>2) false 
5. 三 元 运算 符 
格式 


表达 式 1? 表达 式 2: 表达 式 3 


说 明 : 如 果 “ 表 达 式 1” 的 结果 为 真 ,执行 “表达 式 2” ,否则 执行 “表达 式 3”。 


例如 : 


var a=2; 
var b=3; 
var x=a>b?a:b; 


因为 2 二 3 条 件 为 假 , 则 执行 “表达 式 3”, 即 将 3 赋值 给 x, 所 以 x 的 结果 为 3。 

6. 字符 串 连接 运算 符 

字符 串 连 接 运 算 符 主要 用 于 连接 两 个 字符 串 或 字符 串 变 量 。 因 此 ,在 对 字符 串 或 字符 
串 变量 使 用 该 运算 符 时 ,并 不 是 对 它们 做 加 法 计算 。 

例如 : 


Var x="hello"; 
Var y= "world"; 


Var s=xt+y; //s 的 值 为 "helloworld" 


4.2.5 正则 表达 式 
1. 正则 表达 式 的 作用 
(1) 测试 字符 串 的 某 个 模式 。 例 如 ,可 以 对 一 个 输入 字符 串 进 行 测试 ,以 确定 该 字符 串 
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中 是 否 存在 一 个 电话 号 码 模式 或 一 个 信用 卡号 码 模式 。 这 称 为 数据 有 效 性 验证 。 

(2) 替换 文本 。 可 以 在 文档 中 使 用 一 个 正则 表达 式 来 标识 特定 的 文字 ,然后 可 以 全 部 
将 其 删除 ,或 者 蔡 换 为 别 的 文字 。 

(3) 提取 一 个 子 字符 串 。 可 以 用 来 在 文本 或 输入 字段 中 查找 特定 的 文字 。 

2. 正则 表达 式 的 语法 

一 个 正则 表达 式 就 是 由 普通 字符 (例如 字符 a 到 z) 以 及 特殊 字符 ( 称 为 元 字符 ) 组 成 的 
文字 模式 。 该 模式 描述 在 查找 文字 主体 时 待 匹 配 的 一 个 或 多 个 字符 串 。 正 则 表达 式 作 为 一 
个 模板 ,将 某 个 字符 模式 与 所 搜索 的 字符 串 进 行 匹配 。 

(1) 两 个 特殊 的 符号 "*" 和 "$"。 它 们 的 作用 是 分 别 指出 一 个 字符 串 的 开始 和 结束 。 

"^i"; 以 i 开始 的 字符 串 , 例 如 "iPhone" 等 。 

"script$": 以 $ 结束 的 字符 串 , 例 如 "javascript$ "等 。 

"^abc$": 以 abc 开始 并 且 以 abc 结束 的 字符 串 。 

"x*"、" 十 "和 "?": 表示 一 个 或 一 系列 字符 重复 出 现 的 次 数 。 它 们 分 别 表示 “没有 或 更 
多 ”一 次 或 更 多 ”还 有 “没有 或 一 次 ”。 例 如 : 

。 "ab*"; 表示 一 个 字符 串 有 一 个 a 且 后 面 跟着 零 个 或 若干 个 b。 比 如 : "a"、"ab"、 

"abbb" 等 。 

。 "ab 十 ": 表示 一 个 字符 串 有 一 个 a 且 后 面 跟着 至 少 一 个 b 或 者 更 多 。 

。 "ab?": 表示 一 个 字符 串 有 一 个 a 且 后 面 跟着 零 个 或 者 一 个 b。 

。， "a?b 十 $": 表示 在 字符 串 的 末尾 有 零 个 或 一 个 a 且 跟 着 一 个 或 几 个 b。 比 如 : 

"6666abb"、"222b" 等 。 

(2) {} 用 于 表示 重复 次 数 的 范围 。 

"ab{2)": 表示 一 个 字符 串 有 一 个 a 且 跟 着 2 个 b。 比 如 : "abb"。 

"ab{2,}": 表示 一 个 字符 串 有 一 个 a 且 跟 着 至 少 2 个 b。 

"ab{3,5)": 表示 一 个 字符 串 有 一 个 a 且 跟 着 3 一 5 个 b。 

(3) "表示 * 或 "操作 。 

"hi ihello" : 表示 一 个 字符 串 里 有 "hi" 或 者 "hello"。 

"(b lcd)ef"; 表示 "bef" 或 "cdef"。 

"(a lb) * ce"; 表示 一 串 若干 a 或 b 混合 的 字符 串 后 面 跟 一 个 c。 比 如 ; "aaac"。 

(4)". "表示 任意 字符 。 

"a.[0-9]": 表示 一 个 字符 串 有 一 个 a 后 面 跟着 一 个 任意 字符 和 一 个 数字 。 比 如 : 
Da 

"^. {3}$"; 表示 有 任意 三 个 字符 的 字符 串 ( 长 度 为 3 个 字符 ) 。 

(5) "[J" 表 示 某 些 字符 允许 在 一 个 字符 串 中 的 某 一 特定 位 置 出 现 。 

"[abj": 表示 一 个 字符 串 有 一 个 a 或 b( 相 当 于 "a Ib")。 

"[a-dj": 表示 一 个 字符 串 包含 小 写 的 a 到 d 中 的 一 个 字母 (相当 于 "a lb ic Id" 或 者 
"[abcd]") 。 

"^[a-zA-2Z]": 表示 一 个 以 字母 开头 的 字符 串 。 

"[0-9]%": 表示 一 个 百 分 号 前 有 一 位 的 数字 。 

",[a-zA-Z0-9]$": 表示 一 个 字符 串 以 一 个 逗号 后 面 跟着 一 个 字母 或 数字 结束 。 
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在 方 括号 里 用 "^" 表 示 不 希望 出 现 的 字符 ,"^" 应 在 方 括号 里 的 第 一 位 。 如 :“"%%[^a- 
zA-Z]%" 表 示 两 个 百 分 号 中 不 出 现 字 和 母 。 

(6) 正则 表达 式 预 定义 类 。 

正则 表达 式 预 定义 类 已 定义 好 固定 的 格式 ,可 直接 使 用 ,常用 的 预定 义 类 如 表 4-5 





























所 示 。 
表 4-5 常用 的 预定 义 类 
类 等 价 于 说 明 
Nd [o-9] 匹配 数字 
\D [^o-9] 匹配 非 数 字 
RE [ \n\r\t\A\x0B] 匹配 一 个 空白 字符 
\S [^\n\r\t\\xOB] 匹配 一 个 非 空白 字符 
\w [a-zA-Z0-9_] 匹配 字母 .数字 和 下 划 线 
\w [^a-zA-Z0-9_] 匹配 除 字母 数字、 下划线 之 外 的 字符 


3. 常用 的 正则 表达 式 


(1) 5 
(2) 上 
(3) 5 


(4) 只 
(5) 只 
(6) 只 
《7) 只 


只 能 输入 数字 ,例如 "^[L0-9] x $"。 

只 能 输入 位 的 数字 ,例如 "^d{n}$" 

只 能 输入 至 少 n 位 的 数字 ,例如 " “dn,) $"。 

只 能 输入 m~n 位 的 数字 ,例如 "^d{m.n) $"。 

能 输入 长 度 为 3 的 字符 ,例如 "^. {3) $"。 

能 输入 由 26 个 英文 字母 组 成 的 字符 串 , 例 如 "^[A-Za-zj 十 $"。 

能 输入 由 数字 、26 个 英文 字母 或 者 下 划 线 组 成 的 字符 串 ,例如 "^w 十 $"。 


(8) 验证 用 户 密码 ,例如 "^[a-zA-Z]w{5,17}$ "正确 格式 为 : 以 字母 开头 ,长 度 为 6 一 
18 位 ,只 能 包含 字符 、 数 字 和 下 划 线 。 

(9) 验证 是 否 含有 以 下 字符 :^%&', ;= 一 ?$。 

(10) 验证 E-mail 地 址 ,例如 "^"w 十 ([ 一 十 .]"w 十 ) * @"w 十 ([ 一 .]"w 十 ) * ","w 十 
{= wy 

(11) 验证 一 年 的 12 个 月 ,例如 "^(0? [1-9]|11[0-2]) $ "正确 格式 为 : "01" 一 "09" 和 
i Wd 

【 例 4-5】 以 字母 开头 ,长 度 为 6 一 18 位 .只 能 包含 字符 、 数 字 和 下 划 线 。 


<html> 
<head> 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script language="JavaScript"> 


function isPass() 


{ 


var txt=document .getElementById ("txt") .value; 
Var patrn=/^[a-zA-Z]\w{5,17}$/; 
if (patrn.exec (txt) !=null) 
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输入 错误 格式 的 密码 ,结果 如 图 4-3 所 示 。 


请 输入 密码 ， 
密码 错误 


图 4-3 错误 格式 的 密码 
输入 正确 格式 的 密码 ,结果 如 图 4-4 所 示 。 


请 输入 密码 ， 
密码 正确 


! 


图 4-4 正确 格式 的 密码 


4.3 JavaScript 函数 
4.3.1 函数 的 定义 


JavaScript 的 函数 有 两 种 写法 : 定义 式 和 变量 式 。 使 用 function 来 定义 函数 。 
1. 定义 式 


格式 : 
120 


第 4 章 “Javascript 编程 基础 





定义 式 声明 函数 如 下 : 


JavaScript 函数 可 以 通过 一 个 表达 式 定义 ,函数 表达 式 可 以 存储 在 变量 中 。 
格式 : 


定义 变量 式 声明 函数 如 下 : 


4.3.2 函数 的 参数 及 返回 值 


函数 的 参数 可 以 没有 也 可 以 有 多 个 ,用 逗号 隔 开 ,不 用 说 明 参 数 的 类 型 。 函 数 可 以 没有 
返回 值 , 也 可 以 有 返回 值 ,用 return 给 出 返回 值 。 
【 例 4-6】 带 参数 和 返回 值 的 函数 。 





声明 一 个 函数 mult, 带 有 参数 a、b, 将 axb 的 结果 作为 返回 值 。 
4.3.3 畏 数 的 调用 


1. 声明 式 函 数 的 调用 
通过 函数 名 进行 调用 。 
【 例 4-7】 通过 函数 名 调用 。 





单 击 “ 调 用 函数 ”按钮 ,调用 clickTest() 函数, 该 函数 弹出 一 个 网 页 对 话 框 ,显示 字符 串 
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图 4-5 调用 函数 的 执行 结果 


2. 变量 式 函 数 的 调用 
变量 式 函 数 通过 变量 名 调用 ,在 函数 表达 式 存储 在 变量 后 ,变量 作为 一 个 函数 被 使 用 。 
【 例 4-8】 通过 变量 名 调用 函数 。 





单 击 " 调 用 函数 "按钮 ,调用 变量 式 函数 x(2,3) ,该 函数 弹出 一 个 网 页 对 话 框 ,对 话 框 显 
示 2 * 3 的 值 。 通 过 变量 名 调用 的 结果 如 图 4-6 所 示 , 弹 出 的 提示 框 中 显示 了 2 * 3 的 值 6。 





图 4-6 通过 变量 名 调用 


4.4 JavaScript 程序 结构 


4.4.1 顺序 结构 


程序 顺序 执行 , 依 顺 序 逐 条 执行 ,只 有 在 上 一 条 语句 执行 完 后 ,才能 执行 下 一 条 语句 。 
顺序 结构 示例 如 下 : 
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程序 从 第 一 条 语句 开始 执行 ,直到 最 后 一 条 语句 。 首 先 对 变量 a 和 赋值 ,然后 计算 
axb 的 值 并 赋值 给 <。 然后 在 网 页 上 显示 “ax* b 一 2”。 


4.4.2 ”选择 结构 


通常 在 写 代 码 时 ,总 是 为 满足 不 同 的 需要 来 执行 不 同 的 动作 。 可 以 在 代码 中 使 用 条 件 
语句 来 完成 该 任务 。 

1. 认 语 名 

只 有 当 指定 条 件 为 true 时 ,该 语句 才 会 执行 相应 的 代码 。 

格式 : 





2. if-else 语句 
if-else 语句 在 条 件 为 true 时 执行 第 一 部 分 代码 ,在 条 件 为 false 时 执行 其 他 的 代码 。 
格式 : 
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【 例 4-10】 当时 间 小 于 20:00 时 ,将 得 到 问候 Good day ,否则 将 得 到 问候 Good evening。 





执行 程序 后 ,x 的 结果 是 : 





3. if-else if-else 语句 
使 用 if-else if-else 语句 选择 多 个 代码 块 之 一 来 执行 。 





【 例 4-11】 如 果 时 间 小 于 10:00, 则 将 发 送 问候 Good morning; 否则 如 果 时 间 小 于 20:00， 
则 发 送 问候 Good day, 其 他 时 间 段 发 送 问候 Good evening。 
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最 终 x 的 结果 是 : 





4. switch 语句 
基于 不 同 的 条 件 来 执行 不 同 的 动作 。 





【 例 4-12】 显示 今天 是 星期 几 。 





执行 程序 的 结果 是 显示 当日 的 星期 ,例如 “今天 是 星期 二 ”。 


4.4.3 循环 结构 


循环 结构 是 程序 中 一 种 很 重要 的 结构 。 在 给 定 条 件 成 立时 ,按照 一 定 的 条 件 反复 执行 
某 程序 段 的 算法 步 又。 给 定 的 条 件 称 为 循环 条 件 ; 反 复 执 行 的 步骤 称 为 循环 体 。 
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语句 1 是 初始 化 条 件 , 语 句 2 是 循环 条 件 , 语 句 3 是 迭代 部 分 ,代码 块 4 是 循环 体 。 
【 例 4-13】 for 循环 ,打印 0 一 4 的 数字 。 





程序 的 执行 结果 如 图 4-7 所 示 。 
另外 ,语句 1 既 可 以 有 也 可 以 没有 有。 语句 1 可 以 定义 多 个 变量 。 语句 2 也 是 可 选 的 ,省 


略语 句 2 表示 无 限 循环 ,通常 需要 与 break 一 起 使 用 。 语句 3 也 可 以 省 略 , 例 如 可 以 将 语句 
3 放 到 循环 部 分 执行 。 
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【 例 4-14】 省 略语 句 1 和 语句 3 的 for 循环 。 





执行 程序 的 结果 如 图 4-8 所 示 。 


The number is 0 

2 The mcr 1 2 

The number is 3 ee 

The number is 4 The number is 5 

图 4-7 打印 0~4 的 数字 图 4-8 省 略语 句 1 和 语句 3 的 for 循环 
2. for/in 循环 


JavaScript 中 的 for/in 语句 循环 用 于 遍历 对 象 的 属性 。 
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【 例 4-15】 for/in 循环 。 





John Doe 25 遍历 对 象 , 输 出 对 象 的 属性 值 , 程 序 执行 的 结果 如 图 4-9 所 示 。 
图 4-9 forin 循环 3. while 循环 
while 循环 会 在 指定 条 件 为 真 时 循环 执行 代码 块 。 
格式 如 下 : 





【 例 4-16】 while 循环 。 





循环 输出 数字 1 一 4, 结 果 如 图 4-10 所 示 。 The number is 1 
4. do-while 循环 The number is 2 
do-while 循环 是 while 循环 的 变 体 。 先 执行 一 遍 循 环 体 , 然 The number is 4 
后 判断 条 件 , 如 果 条 件 为 真 则 继续 执行 循环 体 , 如 果 条 件 为 假 则 循 图 410 while 循环 的 
环 终止 。 执行 结果 
格式 : 





【 例 4-17】 do-while 循环 。 
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循环 输出 数字 1 一 4, 结 果 如 图 4-11 所 示 。 

5. break 和 continue 

break 和 continue 用 于 终止 循环 ,break 语句 用 于 跳出 循环 。break 语句 跳出 循环 后 ,会 
继续 执行 该 循环 之 后 的 代码 (如 果 有 的 话 ) 。 

【 例 4-18】 break 。 





当 i 二 3 时 结束 循环 ,其 他 情况 下 不 再 执行 ,结果 如 图 4-12 所 示 。 
The number is 0 


The number is 1 
The number is 2 The number is 1 
The number is 3 
The number is 4 The number is 2 
图 4-11 do-while 循环 的 结果 4-12 运用 break 的 结果 


continue 语 名 中断 循环 中 的 迭代 。 如 果 出 现 了 指定 的 条 件 , 然 后 继续 循环 中 的 下 一 个 
迭代。 
【 例 4-19】 continue 。 
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当 i 二 3 时 跳 过 了 本 次 循环 ,其 他 情况 继续 输出 ,结果 如 图 4-13 所 示 。 
The number is 0 
The number is 1 
The number is 2 
The number is 4 
The number is 5 
The number is 6 
The number is 7 
The number is 8 
The number is 9 


图 4-13 运用 continue 的 结果 


4.5 异常 处 理 


当 JavaScript 引擎 执行 JavaScript 代码 时 ,会 发 生 各 种 错误 ,可 能 是 语法 错误 ,通常 是 
程序 员 造 成 的 编码 错误 或 错别字 ;可 能 是 拼写 错误 或 语言 中 缺少 的 功能 (可 能 由 于 浏览 器 差 
异 ); 可 能 是 由 于 来 自 服务 器 或 用 户 的 错误 输出 而 导致 的 错误 ;也 可 能 是 由 于 许多 其 他 不 可 
预知 的 因素 。JavaScript 使 用 try-catch 和 throw 来 处 理 异 常 。 

1. try-catch 

try 语句 允许 定义 在 执行 时 进行 错误 测试 的 代码 块 。catch 语句 允许 定义 当 try 代码 块 
发 生 错 误 时 所 执行 的 代码 块 。JavaScript 语句 try 和 catch 是 成 对 出 现 的 。 

格式 : 





【 例 4-20】 用 try-catch 处 理 异 常 。 
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由 于 没有 定义 adddlertO) 这 个 函数 ,所 以 代码 出 错 ,处 理 异常 的 结果 如 图 4-14 所 示 。 





4-14 异常 处 理 


2. throw 

throw 语句 允许 我 们 创建 自 定义 错误 ,如 果 把 throw 与 try 和 catch 一 起 使 用 ,那么 应 
能 够 控制 程序 流 , 并 生成 自 定义 的 错误 消息 。 

格式 : 


【 例 4-21】 自 定义 异常 。 
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结果 如 图 4-15 所 示 。 


请 输入 5 到 10 之 间 的 数字 ， 
匠 | [| 
4-15” 自 定义 异常 


4.6 ”JavaScript 事件 的 处 理 


4.6.1 JavaScript 事件 概述 


事件 是 可 以 被 JavaScript 侦 测 到 的 行为 ,事件 可 以 是 浏览 器 行为 也 可 以 是 用 户 行为 。 
与 浏览 器 进行 交互 的 时 候 , 浏 览 器 就 会 触发 各 种 事件 。 比 如 当 我 们 打开 某 一 个 网 页 的 时 候 ， 
浏览 器 加 载 完成 了 这 个 网 页 ,就 会 触发 一 个 load 事件 ; 当 我 们 单 击 页 面 中 的 某 一 个 “地 方 ”， 
浏览 器 就 会 在 那个 地方” 触发 一 个 Click 事件 。 这 样 ,我 们 就 可 以 编写 JavaScript 代码 , 通 
过 监听 某 一 个 事件 来 实现 某 些 功能 扩展 。JavaScript 支持 丰富 的 事件 类 型 ,能 使 Web 开发 
更 加 快速 和 简洁 。 
浏览 器 会 根据 某 些 操作 触发 对 应 事件 ,如 果 我 们 需要 针对 某 种 事件 进行 处 理 , 则 需要 监 
听 这 个 事件 。 监 听 事 件 的 方法 主要 有 以 下 几 种 。 
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1. HTML 内 联 属性 (避免 使 用 ) 


HTML 元 素 里 面 直接 填写 事件 的 有 关 属 性 ,属性 值 为 JavaScript 代码 , 即 可 在 触发 该 
事件 的 时 候 执行 属性 值 的 内 容 。 


【 例 4-22】 内 联 属性 监听 事件 。 





<body> 


<button onclick="alert ("你 单 击 了 这 个 按钮 ") ;"> 单 击 这 个 按钮 < /button> 
</body> 


显而易见 ,使 用 这 种 方法 ,JavaScript 代码 与 HTML 代码 耦合 在 了 一 起 ,不 便于 维护 和 
开发 。 所 以 除非 在 必须 使 用 的 情况 (例如 统计 链接 单 击 数据 ) 下 ,尽量 避免 使 用 这 种 方法 。 

2. DOM 属性 绑 定 

直接 设置 DOM 属性 来 指定 某 个 事件 对 应 的 处 理 函 数 。 


element .onclick=function (event){ 
alert ("你 单 击 了 这 个 按钮 "); 
} 


3. 使 用 事件 监听 函数 
标准 的 事件 监听 函数 如 下 : 


element .addEventListener (<event-name>,<callback>,<use-capture>); 


表示 在 element 这 个 对 象 上 面 添加 一 个 事件 监听 器 , 当 监 听 到 有 过 eventname 二 事件 
发 生 的 时 候 , 调 用 二 callback 二 这 个 回调 函数 。 二 use-capture 二 表示 该 事件 监听 是 在 “捕获 ” 
阶段 中 监听 (设置 为 true) 还 是 在 “ 冒 泡 ”阶段 中 监听 (设置 为 false) 。 

将 上 面 的 例子 改写 成 例 4-23。 

【 例 4-23】 使 用 事件 监听 函数 监听 事件 。 


Var btn=document .getElementById ("btn") 
btn.addEventListener ("click", function(){ 


alert ("你 单 击 了 这 里 "); 
},false); 


JavaScript 所 支持 的 事件 ,可 以 分 为 以 下 几 类 。 
(1) 窗口 事件 (Window Events) 。 

(2) 表单 元 素 事 件 (Form Element Events)。 
(3) 键盘 事件 (Keyboard Events) 。 

(4) 鼠标 事件 (Mouse Events ) 。 

(5) 图 像 事 件 (Image Events) 。 


4.6.2 窗口 事件 


仅 在 body 和 frameset 元 素 中 有 效 。onload 和 onunload 事件 会 在 用 户 进入 或 离开 页 面 
时 被 触发 。 窗 口 事件 的 简单 说 明 如 表 4-6 所 示 。 
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表 4-6 窗口 事件 的 简单 说 明 














事 件 说 明 
onload 当 网 页 被 载 人 时 执行 脚本 
onunload 当 网 页 被 关闭 时 执行 脚本 


【 例 4-24】〗 网 页 被 载 和 时 提示 “网 页 加 载 完 成 ”。 


<body onload="showMessage () "> 
<script type= "text/javascript"> 
function showMessage (){ 
alert ("页 面 加 载 完 成 "); 
} 
</script> 
</body> 


网 页 加 载 的 结果 如 图 4-16 所 示 , 并 弹出 提示 框 。 

















图 4-16 网 页 加 载 的 结果 


4.6.3 表单 元 素 事件 
表单 元 素 事件 仅 在 表单 元 素 中 有 效 。 表 单 事件 的 简单 说 明 如 表 4-7 所 示 。 
表 4-7 表单 事件 的 简单 说 明 




















事 件 说 明 
onchange 当 元 素 (select、 复 选 框 等 ) 改 变 时 执行 脚本 
onsubmit 当 表单 (form) 被 提交 时 执行 脚本 
onreset 当 表 单 被 重 置 时 执行 脚本 
onselect 当 元 素 被 选取 时 执行 脚本 
onblur 当 元 素 失去 焦点 时 执行 脚本 
onfocus 当 元 素 获得 集 











【 例 4-25】 将 获得 焦点 的 文本 框 背景 色 改 为 灰色 。 


<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf- 8" /> 
</head> 
<body> 
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执行 以 上 代码 , 单 击 文本 框 后 的 结果 如 图 4-17 所 示 ,背景 变 为 灰色 。 


单 击 获得 人 点 
图 4-17 单 击 文本 框 的 结果 


4.6.4 键盘 事件 


键盘 事件 在 下 列 HTML 元 素 中 无 效 : base、bdo br, frame、 {frameset、 head、 html、 
iframe、meta、param、script、style 以 及 title。 键 盘 事 件 的 简单 说 明 如 表 4-8 所 示 。 


表 4-8 键盘 事件 的 简单 说 明 














事 件 说 明 
onkeydown 当 键 盘 被 按 下 时 执行 脚本 
onkeypress 当 键 盘 被 按 下 后 又 松 开 时 执行 脚本 
onkeyup 当 键 盘 被 松 开 时 执行 脚本 


【 例 4-26】 按 下 键盘 ,文本 框 背景 色 改 为 灰色 。 





执行 以 上 代码 , 单 击 选择 文本 框 , 按 下 键盘 上 的 任意 键 ,结果 如 图 4-18 所 示 , 背 景 变 为 
灰色 。 
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图 4-18 按 下 键盘 上 的 任意 键 的 运行 程序 的 结果 





4.6.5 鼠标 事件 


鼠标 事件 在 下 列 HTML 元 素 中 无 效 : base、bdo、br、frame、frameset、head、html、 
iframe 、meta、param、script、style 以 及 title。 鼠 标 事件 的 简单 说 明 如 表 4-9 所 示 。 


表 4-9 鼠标 事件 的 简单 说 明 


























事 件 说 明 
onclick 当 鼠 标 被 单 击 时 执行 脚本 
ondblclick 当 鼠 标 被 双击 时 执行 脚本 
onmousedown 当 鼠 标 按钮 被 按 下 时 执行 脚本 
onmousemove 当 鼠 标 指针 移动 时 执行 脚本 
onmouseout 当 鼠 标 指针 移出 某 元 素 时 执行 脚本 
onmouseover 当 鼠 标 指针 悬 停 于 某 元 素 之 上 时 执行 脚本 
onmouseup 当 鼠 标 按钮 被 松 开 时 执行 脚本 


【 例 4-27】 双击 鼠标 改变 div 背景 色 。 





执行 以 上 代码 ,双击 蓝 色 区 域 ,结果 如 图 4-19 所 示 , 背 景 变 为 灰色 。 
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图 4-19 双击 蓝 色 区 域 的 结果 


4.6.6 图 像 事件 
图 像 事件 可 用 于 img 元 素 , 图 像 事件 的 简单 说 明 如 表 4-10 所 示 。 
表 4-10 图 像 事件 的 简单 说 明 
事 件 说 明 


onabort 当 图 像 加 载 中 断 时 执行 脚本 





4.7 ” JavaScript DOM 


4.7.1 _ JavaScript HTML DOM 概述 


对 象 文档 模型 (document object model,DOM) ,是 W3C 组 织 推荐 的 处 理 可 扩展 置 标语 
言 的 标准 编程 接口 。DOM 可 以 以 一 种 独立 于 平台 和 语言 的 方式 访问 和 修改 一 个 文档 的 内 
容 和 结构 。 也 就 是 说 ,这 是 表示 和 处 理 一 个 HTML 或 XML 文档 的 常用 方法 。DOM 技术 
使 用 户 页 面 可 以 动态 地 变化 ,从 而 使 页 面 的 交互 性 大 大 增强 。 但 是 DOM 必须 通过 
JavaScript 等 脚本 语言 来 进行 读 取 , 可 以 改变 HTML、XHTML 以 及 XML 等 文档 。 简 单 来 
说 就 是 DOM 规定 了 HTML、XML 等 的 一 些 规 范 , 使 JavaScript 可 以 根据 这 些 规范 来 进行 
各 种 操作 。 这 些 规范 可 以 用 树 状 图 来 形象 地 表示 ,如 图 4-20 所 示 。 














<html> 









































元 素 : 
<head> 
元 素 : 属性 : 加 | 元 素 : | 元 素 : 
<title> href 下 <hl> 
文本 : 文本 : | 文本 : 
“文档 标题 * “我 的 链接 ” “我 的 标题 ” 

















图 4-20 DOM 树 


通过 这 样 的 树 , 就 可 以 很 快 找到 我 们 想 要 操作 的 节点 ,进而 进行 各 种 属性 、 方 法 、 事 件 等 
的 操作 。 通 过 可 编程 的 对 象 模型 ,JavaScript 获得 了 足够 的 能 力 来 创建 动态 的 HTML，。 
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。 JavaScript 能 够 改变 页 面 中 的 所 有 HTML 元 素 。 
。 JavaScript 能 够 改变 页 面 中 的 所 有 HTML 属性 。 
。 JavaScript 能 够 改变 页 面 中 的 所 有 CSS 样式 。 

。 JavaScript 能 够 对 页 面 中 的 所 有 事件 做 出 反应 。 


4.7.2 HTML DOM 对 象 


HTML DOM 定义 了 访问 和 操作 HTML 文档 的 标准 方法 。 它 把 HTML 文档 呈现 为 
带 有 元 素 、 属 性 和 文本 的 树 结构 。 在 层次 图 中 ,每 个 对 象 是 它 的 父 对 象 的 属性 ,如 Window 
对 象 是 Document 对 象 的 父 对 象 ,所 以 再 引用 Document 对 象 就 可 以 使 用 Window. 
Document, 相 当 于 Document 是 Window 对 象 的 属性 。 对 于 每 一 个 页 面 ,浏览 器 都 会 自动 
创建 Window 对 象 \Navigator 对 象 、Screen 对 象 、.History 对 象 、Location 对 象 .Document 
对 象 。 

1. Window 对 象 

Window 对 象 表示 浏览 器 中 打开 的 窗口 。 如 果 文 档 包 含 框架 (frame 或 iframe 标签 )， 
浏览 器 会 为 HTML 文档 创建 一 个 Window 对 象 ,并 为 每 个 框架 创建 一 个 额外 的 Window 
对 象 。Window 对 象 表示 浏览 器 中 打开 的 窗口 ,如 果 文 档 包 含 frame 或 iframe 标签 ,浏览 器 
会 为 HTML 文档 创建 一 个 Window 对 象 ,并 为 每 个 框架 创建 一 个 额外 的 Window 对 象 。 
在 客户 端 JavaScript 中 , Window 对 象 是 全 局 对 象 ,所 有 的 表达 式 都 在 当前 环境 中 计算 , 因 
此 可 以 把 窗口 的 属性 作为 全 局 变量 来 使 用 ,例如 可 以 只 写 doucment ,而 不 必 写 Window. 
document。 同 样 可 以 把 窗口 对 象 的 方法 当成 函数 使 用 ,如 只 写 alert() ,而 不 必 写 Window. 
alert()。Window 对 象 的 属性 及 方法 如 表 4-11 所 示 。 


表 4-11 Window 对 象 的 属性 及 方法 



































属性 /方法 描 述 
close 属性 返回 一 个 布尔 值 .声明 了 窗口 是 否 已 经 关闭 ,为 只 读 属性 
defaultStatus 属性 ”| 设置 或 返回 窗口 状态 栏 中 的 默认 文本 ,为 只 读 属性 
opener 属性 返回 创建 该 窗口 的 Window 对 象 的 引用 ,是 一 个 可 读 可 写 的 属性 
self 属性 返回 窗口 自身 的 引用 ,相当 于 Window 属性 
doucment 属性 对 Document 对 象 的 只 读 引 用 
alert() 方 法 用 于 显示 带 有 一 条 指定 消息 和 一 个 OK 按钮 的 警告 框 
confirm( ) 方 法 用 于 显示 一 个 带 有 指定 消息 .OK 及 Cancel 按钮 的 对 话 框 
prompt() 方 法 用 于 显示 可 使 用 户 进行 输入 的 对 话 框 





createPopup() 方 法 | 用 于 创建 一 个 pop-up 窗口 


按照 指定 的 周期 (以 毫秒 计 ) 来 调用 函数 或 计算 表达 式 。 它 会 不 停 地 调用 函数 ， 
直到 clearInterval() 被 调用 或 窗口 被 关闭 

clearInterval() 方 法 | 取消 由 setInterval() 设 置 的 timeout 

setTimeout() 方 法 用 于 在 指定 的 毫秒 数 后 调用 函数 或 计算 表达 式 

write() 方 法 向 文档 写 HTML 表达 式 或 JavaScript 代码 





setInterval() 方 法 

















writeln() 方 法 等 同 于 write() 方 法 .不 同 的 是 在 每 个 表达 式 之 后 写 一 个 换行 符 


137 


交互 式 Web 前 端 开 发 实践 





【 例 4-28】 Window 对 象 方法 的 应 用 。 





2. Navigator 对 象 
Navigator 对 象 包含 有 关 浏 览 器 的 信息 ,Navigator 对 象 包含 的 属性 描述 了 正在 使 用 的 
浏览 器 ,可 以 使 用 这 些 属 性 进行 平台 的 专用 配置 ,这 个 实例 是 唯一 的 ,可 以 通过 window. 
navigator 属性 来 应 用 它 。Navigator 对 象 常用 的 属性 和 方法 如 表 4-12 所 示 。 
表 4 -12 Navigator 对 象 常用 的 属性 和 方法 
属性 /方法 描 述 
appCodeName 属性 返回 浏览 器 的 代码 名 
appMinorVersion 属性 | 返回 浏览 器 的 次 级 版 本 
appName 属性 返回 浏览 器 的 名 称 














138 


第 4 章 ， JavaScript 编程 基础 





属性 /方法 描 述 
appVersion 属性 返回 浏览 器 的 平台 和 版 本 信息 。 返 回 窗口 自身 的 引用 ,相当 于 Window 属性 
browserLanguage 属性 | 返回 当前 浏览 器 的 语言 
cookieEnabled 属性 返回 指明 浏览 器 中 是 否 启 用 cookie 的 布尔 值 
javaEnabled() 方 法 规定 浏览 器 是 否 启用 Java 
taintEnabled() 方 法 规定 浏览 器 是 否 启 用 数据 污点 (data tainting) 























3. Screen 对 象 

Screen 对 象 包含 有 关 客 户 端 显示 屏幕 的 信息 。 每 个 Window 对 象 的 screen 属性 都 引 
用 一 个 Screen 对 象 。Screen 对 象 中 存放 着 有 关 显 示 浏 览 器 屏幕 的 信息 。JavaScript 程序 将 
利用 这 些 信 息 来 优化 它们 的 输出 ,以 达到 用 户 的 显示 要 求 。 例 如 ,一 个 程序 可 以 根据 显示 器 
的 尺寸 选择 使 用 大 图 像 还 是 使 用 小 图 像 , 它 还 可 以 根据 显示 器 的 颜色 深度 选择 使 用 16 位 色 
还 是 使 用 8 位 色 的 图 形 。 另 外 ,JavaScript 程序 还 能 根据 有 关 屏 幕 尺寸 的 信息 将 新 的 浏览 
器 窗口 定位 在 屏幕 中 间 。Screen 对 象 的 常用 属性 如 表 4-13 所 示 。 

表 4-13 Scereen 对 象 的 常用 属性 









































属 性 描 述 
avail Height 返回 显示 屏幕 的 高 度 ( 除 Windows 任务 栏 之 外 ) 
availWidth 返回 显示 屏幕 的 宽度 ( 除 Windows 任务 栏 之 外 ) 
bufferDepth 设置 或 返回 调 色 板 的 比特 深度 
colorDepth 返回 目标 设备 或 缓冲 器 上 的 调 色 板 的 比特 深度 
deviceXDPI 返回 显示 屏幕 的 每 英寸 水 平 点 数 
deviceYDPI 屏幕 的 每 英寸 垂直 点 数 
height 返回 显示 屏幕 的 高 度 
pixelDepth 返回 显示 屏幕 的 颜色 分 辩 率 (比特 每 像素 ) 





4。 History 对 象 
History 对 象 包含 用 户 ( 在 浏览 器 窗口 中 ) 访 问 过 的 URL。History 对 象 是 Window 对 
象 的 一 部 分 ,可 通过 Window. history 属性 对 其 进行 访问 。History 对 象 常用 的 属性 及 方法 
如 表 4-14 所 示 。 
表 414 History 对 象 常用 的 属性 及 方法 














属性 /方法 描 述 
length 属性 返回 浏览 器 历史 列表 中 的 URL 数量 
back() 方 法 加 载 历史 列表 中 的 前 一 个 URL 
forward( ) 方 法 加 载 历 史 列 表 中 的 下 一 个 URL 
go() 方 法 加 载 历史 列表 中 的 某 个 具体 页 面 





5. Location 对 象 
Location 对 象 包含 有 关 当 前 URL 的 信息 。Location 对 象 是 Window 对 象 的 一 个 部 分 ， 
可 通过 Window. location 属性 来 访问 。Location 对 象 常用 的 属性 及 方法 如 表 4-15 所 示 。 
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表 4-15 Location 对 象 常用 的 属性 及 方法 


























属性 /方法 描 ” 述 
hash 属性 设置 或 返回 从 井 号 (# ) 开 始 的 URL( 锚 ) 
hostname 属性 设置 或 返回 当前 URL 的 主机 名 
href 属性 设置 或 返回 完整 的 URL 
pathname 属性 设置 或 返回 当前 URL 的 路 径 部 分 
assign() 方 法 加 载 新 的 文档 
reload() 方 法 重新 加 载 当 前 文档 
replace() 方 法 用 新 的 文档 替换 当前 文档 





6. Document 对 象 
每 个 载 人 浏览 器 的 HTML 文档 都 会 成 为 Document 对 象 。Document 对 象 使 我 们 可 以 
从 脚本 中 对 HTML 页 面 中 的 所 有 元 素 进行 访问 。Document 对 象 的 属性 及 方法 如 表 4-16 
所 示 。 
表 4-16 ”Document 对象 的 属性 及 方法 















































属性 /方法 描 述 
body 属性 提供 对 二 body 二 元 素 的 直接 访问 。 对 于 定义 了 框架 集 的 文档 ,该 属 
性 引用 最 外 层 的 框架 集 
cookie 属性 设置 或 返回 与 当前 文档 有 关 的 所 有 cookie 
domain 属性 返回 当前 文档 的 域名 
lastModified 属性 返回 文档 被 最 后 修改 的 日 期 和 时 间 
referrer 属性 返回 载 入 当前 文档 的 URL 
title 属性 返回 当前 文档 的 标题 
URL 属性 返回 当前 文档 的 URL 
open() 方 法 打开 一 个 新 的 文档 ,并 擦 除 当 前 文档 的 内 容 
close() 方 法 关闭 一 个 由 document. open( ) 方 法 打开 的 输出 流 , 并 显示 选 定 的 数据 
getElementByJd( ) 方 法 返回 对 拥有 指定 ID 的 第 一 个 对 象 的 引用 
getElementsByName() 方 法 返回 带 有 指定 名 称 对 象 的 集合 
getElementsByTagName() 方 法 | 返回 带 有 指定 标签 名 的 对 象 的 集合 
write() 方 法 向 文 档 写 入 HTML 表达 式 或 JavaScript 代码 
writeln() 方 法 等 同 于 write() 方 法 ,不 同 的 是 在 每 个 表达 式 之 后 写 一 个 换行 符 


【 例 4-29】 单 击 "提交 ”按钮 ,获取 按钮 的 值 。 


<body> 
<script type="text/javascript"> 
function getValue(){ 
var x=document .getElementById ("btn"); 
alert (x.value); 
} 
</script> 
<form> 
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<input type="button" value= "提交" onclick="getValue()" id="btn"/> 
</form> 
</body> 


执行 以 上 代码 , 单 击 “ 提 交 ” 按 钮 ,程序 的 运行 结果 如 图 4-21 所 示 。 








4-21 


7. Element 对 象 
在 HTML DOM 中 ,Element 对 象 表示 HTML 元 素 。Element 对 象 可 以 拥有 类 型 为 元 
素 节点 、 文 本 节点 、 注 释 节 点 的 子 节 点 。NodeList 对 象 表 示 节 点 列表 ,比如 HTML 元 素 的 


子 节点 集合 。Element 对 象 的 部 分 





获取 * 提 交 "”" 按 钮 的 值 


属性 及 方法 如 表 4-17 所 示 。 


表 417 Element 对 象 的 部 分 属性 及 方法 

















属性 /方法 描 述 
element. attributes 属性 返回 一 个 元 素 的 属性 数组 
clement. childNodes 属性 返回 元 素 的 一 个 子 节点 的 数组 
element. contentEditable 属性 设置 或 返回 元 素 的 内 容 是 否 可 编辑 
element. innerHTML 属性 设置 或 者 返回 元 素 的 内 容 
nodelist. length 属性 返回 节点 列表 的 节点 数目 





clement 


.addEventListener() 方 法 


向 指定 元 素 添 加 事件 句柄 





























element. appendChild() 方 法 为 元 素 添 加 一 个 新 的 子 元 素 
element. getAttribute( ) 方 法 返回 指定 元 素 的 属性 值 
element. getAttributeNode( ) 方 法 返回 指定 属性 节点 
element. getElementsByTagName() 方 法 返回 指定 标签 名 的 所 有 子 元 素 集合 
element. getElementsByClassName() 方 法 | 返回 文档 中 所 有 指定 类 名 的 元 素 集合 ,作为 NodeList 对 象 
element, removeChild( ) 方 法 删除 一 个 子 元 素 
element, setAttribute() 方 法 设置 或 者 改变 指定 属性 并 指定 值 
nodelist. item() 方 法 返回 某 个 元 素 基于 文档 树 的 索引 
【 例 4-30】 单 击 “ 单 击 修改 文本 ”按钮 ,改变 超 链接 的 属性 和 文本 。 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script> 


function changeLink(){ 


document .getElementById('mya') .innerHTML= "搜狐 "7 
document .getElementById('mya') .href="http://tv-sohu.com/"7 
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执行 以 上 代码 ,结果 如 图 4-22 所 示 。 

8.Attr 对 象 搜狐 

在 HTML DOM 中 , Attr 对 象 表示 HTML 属性 。 
HTML 属性 始终 属于 HTML 元 素 。NamedNodeMap 图 4-22 改变 超 链接 的 属性 和 文本 
对 象 表示 元 素 属性 节点 的 无 序 集合 。NamedNodeMap 
中 的 节点 可 通过 名 称 或 索引 (数字 ) 来 访问 。Attr 对 象 的 部 分 属性 及 方法 如 表 4-18 所 示 。 


表 418 Attr 对 象 的 部 分 属性 及 方法 
































属性 /方法 描 述 
attr. isld 属性 如 果 属 性 是 id 类 型 , 则 返回 true, 否 则 返回 false 
attr name 属性 返回 属性 的 名 称 
attr. value 属性 设置 或 返回 属性 的 值 
attr. specified 属性 如 果 已 指定 属性 , 则 返回 true, 否则 返回 false 
nodemap. length 属性 返回 NamedNodeMap 中 的 节点 数 
nodemap. getNamedItem() 方 法 从 NamedNodeMap 返回 指定 的 属性 节点 
nodemap. item() 方 法 返回 NamedNodeMap 中 位 于 指定 下 标的 节点 
nodemap. removeNamedltem() 方 法 移 除 指定 的 属性 节点 
nodemap. setNamedItem() 方 法 设置 指定 的 属性 节点 (通过 名 称 ) 


【 例 4-31】 改变 标题 的 大 小 。 
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执行 以 上 代码 , 单 击 “ 试 一 下 ”按钮 ,标题 变 大 ,如 图 4-23 所 示 。 


字体 将 变 大 
区 


图 4-23 标题 变 大 


4.7.3 HTML DOM 的 简单 应 用 


1. 改变 HTML 
【 例 4-32】 改变 HTML 输出 流 。 





以 上 代码 除了 在 网 页 上 显示 “这 是 一 个 网 页 ”之 外 ,还 通过 document. write( Date()) 在 
网 页 中 显示 了 当天 的 日 期 ,如 图 4-24 所 示 。 


Wed Dec 14 2016 13:52:53 GMT+0800 (中 国标 准时 间 ) 
这 是 一 个 网 页 


图 4-24 改变 HTML 输出 流 


【 例 4-33】〗 改变 HTML 的 内 容 。 
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执行 以 上 代码 ,本 来 网 页 中 应 该 显示 “段落 文本 ”, 但 是 通过 代码 “document. 
getElementById("p1").innerHTML=" 新 文本 !" "将 段落 文本 更 改 为 “新 文本 ”。 
【 例 4-34】 改变 HTML 属性 。 





执行 以 上 代码 ,通过 代码 “document. getElementByld ("image"). src 一 "landscape. 
jpg"; ”将 原来 图 片 的 src 属性 的 值 更 改 为 "landscape. jpg”。 

2. 改变 CSS 

HTML DOM 允许 JavaScript 改变 HTML 元 素 的 样式 。 

语法 如 下 : 





【 例 4-35】 改变 HTML 样式 。 
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通过 document 对 象 将 段落 id 为 p2 的 段落 的 颜色 设置 为 蓝 Benno .Woladi 

色 , 将 字体 设置 为 Arial, 将 字体 大 小 设置 为 larger。 对 比 结果 如 

4-25 所 示 。 Hello World! 
如 需 向 HTML DOM 添加 新 元 素 , 则 必须 首先 创建 该 元 素 


以 上 段落 通过 脚本 修改 。 
(元 素 节 点 ) ,然后 向 一 个 已 存在 的 元 素 追 加 该 元 素 。 
【 例 4-36】 创建 新 的 HTML 元 素 。 


图 4-25 改变 HTML 样式 





以 上 代码 通过 document. createElement 方法 创建 一 个 新 元 素 p: 并 将 新 元 素 追 加 到 已 
存在 的 元 素 div 上 。 
【 例 4-37】 删除 一 个 段落 。 





以 上 代码 删除 段落 pl 。 
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4.8 综合 实例 


本 节 我 们 将 通过 一 个 案例 来 综合 应 用 JavaScript ,帮助 大 家 掌握 并 理解 JavaScript 的 基 
本 语法 和 基本 应 用 。 


4.8.1 需求 描述 


创建 一 个 表单 ,表单 样式 如 图 4-26 所 示 , 再 对 表单 进行 验证 ,验证 通过 则 提示 提交 成 
功 。 验 证 要 求 如 下 : 

(1) 用 户 名 不 能 为 空 。 

(2)“ 确 认 密 码 ” 与 “密码 ”两 个 文本 框 的 输入 值 必须 一 致 且 不 能 为 空 。 

(3) E-mail 必须 符合 邮箱 规则 。 

(4) 文本 框 失去 焦点 时 进行 验证 。 

(5) 所 有 验证 通过 单 击 * 注 册 ” 按 钮 并 提示 ”success”, 和 否则 显示 未 通过 的 文本 框 。 





【新 用 户 注册 了 
用 户 名 : | ] 
密码 :| | 
确认 密码 : | | 


E-mail: | | 











4.8.2 分 析 及 实现 


1. 分 析 

要 按 以 上 要 求 进行 数据 验证 , 则 需 实现 如 下 功能 。 

(1) 单 击 “提交 ?按钮 不 能 直接 提交 数据 ,应 该 调用 一 个 函数 来 验证 数据 。 
(2) 验证 数据 必须 获取 文本 框 的 值 ,并 判断 值 的 有 效 性 。 

(3) 验证 未 通过 时 样式 如 图 4-27 所 示 。 

2. 实现 代码 

(1) 网 页 内 容 。 





<div class="login"> 
< form name="form" method="post" action="register.php" onsubmit="return 
check()"> 
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【新 用 户 注册 】 
用 户 各: 一 下 胡 为 
ge: | 
确认 密码 : [_ ”|] * 不 能 为 主 且 必 须 一 到 
Email:[ | 者 式 下 正确 
a 








图 4-27 验证 未 通过 的 样式 





(2) CSS 样式 。 
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(3) 完整 的 JavaScript 代码 。 
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本 章 小 结 


JavaScript 是 一 种 属于 网 络 的 脚本 语言 ,已 经 被 广泛 用 于 Web 应 用 开发 ,常用 来 为 网 页 
添加 各 式 各 样 的 动态 功能 ,为 用 户 提供 更 流畅 美观 的 浏览 效果 。 

本 章 从 JavaScript 的 概念 出 发 ,对 JavaScript 的 特点 、 优 点 、 缺 陷 等 方面 做 了 详细 介绍 ， 
重点 介绍 了 JavaScript 的 语法 。JavaScript 的 语法 丰富 ,简单 易学 。JavaScript 运算 符 包 含 
算术 运算 符 、 赋 值 运算 符 .比较 运算 符 、 逻 辑 运 算 符 .条 件 运算 符 等 。JavaScript 函数 也 有 返 
回 值 和 参数 。HTML DOM 符合 W3C 标准 。HTML DOM 定义 了 用 于 HTML 的 一 系列 
标准 的 对 象 , 以 及 访问 和 处 理 HTML 文档 的 标准 方法 。 通 过 DOM 可 以 访问 所 有 的 
HTML 元 素 , 连 同 它们 所 包含 的 文本 和 属性 。 可 以 对 其 中 的 内 容 进行 修改 和 删除 ,同时 也 
可 以 创建 新 的 元 素 。 
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5.1 面向 过 程 编程 和 面向 对 象 编程 概述 


5.1.1 面向 过 程 编程 


. 什么 是 面向 过 程 

epee 种 以 过 程 为 中 心 的 编程 思想 , 先 分 析出 解决 问题 的 步骤 ,然后 用 函数 
把 这 些 步骤 一 步 一 步 实现 。 进 行 面向 过 程 的 编程 时 ,数据 和 对 数据 的 操作 是 分 离 的 。 一 般 
的 面向 过 程 是 从 上 往 下 步 步 求 精 , 所 以 面向 过 程 最 重要 的 是 模块 化 的 思想 方法 。 比 如 ,学 生 
早上 起 来 粗略 地 可 以 将 过 程 拟定 为 : 

(1) 起 床 

(2) 穿 衣 

(3) 洗脸 及 刷牙 

(4) 去 学 校 

而 这 4 步 就 是 一 步 一 步 地 完成 的 , 它 的 顺序 很 重要 ,只 需 一 项 一 项 地 实现 就 可 以 了 。 

2. 面向 过 程 编程 的 优 缺 点 

面向 过 程 编 程 的 优点 : 首先 ,程序 顺序 执行 :流程 清晰 明了 。 其 次 ,面向 过 程 的 性 能 
比 面 向 对 象 要 高 ,因为 类 调用 时 需要 实例 化 .开销 比较 大 ,比较 消耗 资源 ; 比如 单片机 、 身 
入 式 开发 .Linux/UNIX 等 一 般 采 用 面向 过 程 的 开发 ,性 能 是 最 重要 的 因素 。 所 以 当 我 们 
是 个 不 是 很 复杂 的 程序 ,同时 对 性 能 方面 又 有 比较 高 的 要 求 时 ,面向 过 程 就 显得 十 

分 高 效 。 

面向 过 程 编程 的 缺点 : 主 控 程 序 承担 任务 多 ,各 个 模块 都 需要 主 控 程序 进行 控制 和 调 
度 , 主 控 和 模块 之 间 承 担 的 任务 不 均衡 ;面向 过 程 定义 的 函数 无 法 方便 地 进行 扩展 ,重用 性 
低 ,不 像 面 向 对 象 程序 那样 易 维 护 、 易 复 用 、 易 扩展 。 另 外 ,在 面向 过 程 的 程序 中 ,许多 重要 
的 数据 被 放置 在 全 局 数据 区 ,这 样 它们 可 以 被 所 有 的 函数 访问 ,很 容易 造成 全 局 数据 在 无 意 
中 被 其 他 函数 改动 .因而 程序 的 正确 性 不 易 保证 。 


5.1.2 面向 对 象 编程 


1. 什么 是 面向 对 象 
面向 对 象 是 在 结构 化 设计 方法 出 现 很 多 问题 的 情况 下 应 运 而 生 的 ,面向 对 象 程序 设计 
(OOP) 技 术 汲 取 了 结构 化 程序 设计 中 的 好 的 思想 .并 将 这 些 思想 与 一 些 新 的 、 强 大 的 理念 
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相 结 合 , 从 而 给 程序 设计 提供 了 一 种 全 新 的 方法 。 通 常 ,在 面向 对 象 的 程序 设计 风格 中 ,会 
将 一 个 问题 分 解 为 一 些 相互 关联 的 子 集 ,每 个 子 集 内 部 都 包括 了 相关 的 数据 和 函数 。 同 时 ， 
会 以 某 种 方法 将 这 些 子 集 分 为 不 同等 级 ,而 一 个 对 象 就 会 成 为 一 个 已 定义 的 某 种 类 型 的 变 
量 。 当 定义 了 一 个 对 象 ,就 隐 含 地 创建 了 一 个 新 的 数据 类 型 。 面 向 对 象 编程 是 将 事物 对 象 
化 ,通过 对 象 的 通信 来 解决 问题 。 面 向 对 象 编程 时 ,数据 和 对 数据 的 操作 是 绑 定 在 一 起 的 。 
同样 ,以 学 生 早上 起 来 的 过 程 为 例 ,只 需要 抽象 出 一 个 学 生 的 类 ,该 类 同样 包括 了 以 上 四 个 
方法 ,但 是 具体 的 顺序 就 不 一 定 按照 原来 的 顺序 。 

2. 面向 对 象 编程 的 优 缺 点 

面向 对 象 编程 的 优点 如 下 : 

(1) 易 维 护 。 采 用 面向 对 象 思 想 设 计 的 结构 ,可 读 性 高 ,由 于 继承 的 存在 ,即使 改变 需 
求 ,那么 维护 也 只 是 限定 在 局 部 模块 ,所 以 维护 起 来 非常 方便 ,成 本 也 较 低 。 

(2) 质量 高 。 在 设计 时 可 重用 现 有 的 代码 ,在 以 前 的 项 目 中 已 被 测试 过 的 类 只 要 满足 
业务 需求 并 具有 较 高 的 质量 , 即 可 再 次 使 用 。 

(3) 效率 高 。 在 开发 软件 时 ,根据 设计 的 需要 对 现实 世界 的 事物 进行 抽象 ,并 产生 出 
类 。 使 用 这 样 的 方法 解决 问题 ,接近 于 日 常生 活 和 自然 的 思考 方式 ,势必 会 提高 软件 开发 的 
效率 和 质量 。 

(4) 易 扩展 。 由 于 继承 .封装 、 多 态 的 特性 ,自然 设计 出 高 内 聚 、 低 耦合 的 系统 结构 ,使 
得 系统 更 灵活 、 更 容易 扩展 ,而 且 成 本 较 低 。 

面向 对 象 编程 的 缺点 如 下 : 

(1) 需要 一 定 的 软件 支持 环境 。 

(2) 不 太 适 宜 大 型 的 信息 系统 开发 。 若 缺乏 整体 系统 的 设计 及 划分 , 易 造 成 系统 结构 
不 合理 .各 部 分 关系 失调 等 问题 。 

(3) 只 能 在 现 有 业务 基础 上 进行 分 类 整理 ,不 能 从 科学 管理 角度 进行 理 顺和 优化 。 初 
学 者 不 易 接受 , 较 难 学 。 

(4) 增加 工作 量 。 如 果 一 味 地 强调 封装 , 当 进 行 修改 对 象 内 部 时 ,对 象 的 任何 属性 都 不 
允许 外 部 直接 存 取 , 则 要 增加 许多 没有 其 他 意义 、 只 负责 读 或 写 的 行为 。 这 会 为 编程 工作 增 
加 负担 ,增加 运行 开销 ,并 且 使 程序 显得 脐 肿 。 

(5) 性 能 低 。 由 于 面向 更 高 的 多 辑 抽象 层 ,使 得 面向 对 象 的 程序 在 实现 的 时 候 , 不 得 不 
做 出 性 能 上 的 牺牲 ,计算 时 间 和 存储 空间 都 开销 很 大 。 

3. 面向 对 象 的 三 大 特征 

(1) 封装 。 也 就 是 把 客观 事物 封装 成 抽象 的 类 ,并 且 类 可 以 把 自己 的 数据 和 方法 只 让 
可 信 的 类 或 者 对 象 操作 ,对 不 可 信 的 进行 信息 隐藏 。 封 装 是 面向 对 象 的 特征 之 一 ,是 对 象 和 
类 概念 的 主要 特性 。 简 单 地 说 ,一 个 类 就 是 一 个 封装 了 数据 以 及 操作 这 些 数 据 的 代码 的 修 
辑 实体 。 在 一 个 对 象 内 部 , 某 些 代码 或 某 些 数据 可 以 是 私有 的 .不 能 被 外 界 访问 。 通 过 这 种 
方式 ,对 象 对 内 部 数据 提供 了 不 同 级 别 的 保护 ,以 防止 程序 中 无 关 的 部 分 意外 地 改变 或 错误 
地 使 用 了 对 象 的 私有 部 分 。 

(2) 继承 。 所 谓 继承 ,是 指 可 以 让 某 个 类 型 的 对 象 获得 另 一 个 类 型 的 对 象 的 属性 和 方 
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法 。 继 承 是 指 这 样 一 种 能 力 : 它 可 以 使 用 现 有 类 的 所 有 功能 ,并 在 无 须 重 新 编写 原来 类 的 
情况 下 对 这 些 功 能 进行 扩展 。 通 过 继承 创建 的 新 类 称 为 “ 子 类 ”或 “派生 类 ”, 被 继承 的 类 称 
为 “ 基 类 有 父 类 ?或 "“ 超 类 ”。 继 承 的 过 程 , 就 是 从 一 般 到 特殊 的 过 程 。 要 实现 继承 ,可 以 通过 
“继承 ”(Inheritance) 和 “组 合 ”(Composition) 来 实现 。 继 承 概念 的 实现 方式 有 两 类 : 实现 继 
承 与 接口 继承 。 实 现 继承 是 指 直 接 使 用 基 类 的 属性 和 方法 而 无 须 额外 编码 的 能 力 ;接口 继 
承 是 指 仅 使 用 属性 和 方法 的 名 称 , 但 是 子 类 必须 提供 实现 的 能 力 。 
(3) 多 态 。 多 态 就 是 指 一 个 类 实例 的 相同 方法 在 不 同情 形 下 有 不 同 的 表现 形式 。 多 态 
机 制 使 具有 不 同 内 部 结构 的 对 象 可 以 共享 相同 的 外 部 接口 。 这 意味 着 ,虽然 针对 不 同 对 象 
的 具体 操作 不 同 ,但 通过 一 个 公共 的 类 ,它们 (那些 操作 ) 可 以 通过 相同 的 方式 予以 调用 。 








5.2 ” JavaScript 的 面向 对 象 编程 


5.2.1 对 象 的 创建 与 调用 


JavaScript 是 面向 对 象 的 语言 ,但 JavaScript 不 使 用 类 。 在 JavaScript 中 不 会 创建 类 ， 
也 不 会 通过 类 来 创建 对 象 。JavaScript 中 的 所 有 事物 都 是 对 象 : 字符 串 、 数 值 、 数 组 ,函数 
等 。 创 建新 对 象 有 两 种 不 同 的 方法 。 

1. 直接 定义 并 创建 对 象 的 实例 

格式 : 


对 象 名 =new Object (); 
对 象 名 .属性 名 = 值 : 


创建 好 对 象 以 后 ,可 以 直接 通过 对 象 名 访问 属性 和 方法 ,如 例 5-1 所 示 。 
【 例 5-1】 创建 一 个 person 对 象 并 赋值 。 


person=new Object (); 
person.firstname="John"; 
person.lastname="Doe"; 
person.age=50; 


person.eyecolor="blue"; 


创建 好 对 象 后 ,可 以 通过 person. age 获取 age 的 值 。 
2. 使 用 对 象 构造 器 创建 对 象 
对 象 构造 器 格式 : 
function 构造 器 名 (参数 1, 参 数 2, .…) { 
属性 = 参数 1; 
创建 好 对 象 构 造 器 之 后 就 可 以 创建 对 象 了 ,如 例 5-2 所 示 。 
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创建 好 对 象 以 后 ,可 以 直接 通过 对 象 名 访问 属性 和 方法 。 
【 例 5-2】 创建 一 个 person 对 象 并 赋值 。 





创建 好 对 象 后 可 以 通过 myMother. age 获取 age 的 值 。 
5.2.2 常用 的 内 置 对 象 


1. 数字 对 象 
JavaScript 只 有 一 种 数字 类 型 。 可 以 使 用 也 可 以 不 使 用 小 数 点 来 书写 数字 。 


极 大 或 极 小 的 数字 可 通过 科学 (指数 ) 计 数 法 来 写 : 


JavaScript 不 是 类 型 语言 。 与 许多 其 他 编程 语言 不 同 ,JavaScript 不 定义 不 同类 型 的 数 
字 , 比 如 整数 、 短 ,长 , 浮 点 等 。 在 JavaScript 中 ,数字 不 分 为 整数 类 型 和 浮 点 型 类 型 ,所 有 的 
数字 都 是 浮 点 型 类 型 。JavaScript 采用 IEEE 754 标准 定义 的 64 位 浮 点 格式 表示 数字 , 它 
能 表示 最 大 值 为 土 1.7976931348623157 X10 ,最 小 值 为 十 5 X10 。 

关于 精度 ,整数 (不 使 用 小 数 点 或 指数 计数 法 ) 最 多 为 15 位 ,小 数 的 最 大 位 数 是 17 位 ， 
但 是 浮 点 运算 并 不 总 是 100% 准确 。 

【 例 5-3〗】 小 数 的 精度 。 
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数字 可 以 直接 对 数据 进行 初始 化 ,例如 var x 三 123。 数 字 对 象 初始 化 数据 ,例如 var 
y 二 new Number(123)。 数 字 对 象 常用 的 属性 及 方法 如 表 5-1 所 示 。 














数字 对 象 常用 的 属性 及 方法 
属性 /方法 描述 
constructor 属性 返回 对 创建 此 对 象 的 Number 函数 的 引用 
MAX_VALUE 属性 可 表示 的 最 大 的 数 
MIN_VALUE 属性 可 表示 的 最 小 的 数 
NaN 属性 非 数 字 值 





NEGATIVE_INFINITY 属性 


负 无 穷 大 ,溢出 时 返回 该 值 





POSITIVE_INFINITY 属性 


正 无 穷 大 ,溢出 时 返回 该 值 





prototype() 方 法 


使 用 户 有 能 力 向 对 象 添加 属性 和 方法 

















toString() 方 法 把 数字 转换 为 字符 串 ,使 用 指定 的 基数 

toLocaleString() 方 法 把 数字 转换 为 字符 串 ,使 用 本 地 数字 格式 顺序 

toFixed() 方 法 把 数字 转换 为 字符 串 ,结果 的 小 数 点 后 有 指定 位 数 的 数字 
toExponential( ) 方 法 把 对 象 的 值 转换 为 指数 计数 法 

toPrecision() 方 法 把 数字 格式 化 为 指定 的 长 度 





valueOf() 方 法 





返回 一 个 Number 对 象 的 基本 数字 值 


【 例 5-4】 Number 对 象 的 toFixed 方法 。 











</script> 
</body> 
</html> 


以 上 代码 的 执行 结果 如 图 5-1 所 示 。 
2. 字符 串 (String) 对 象 
String 对 象 用 于 处 理 已 有 的 字符 块 , 一 个 字符 串 用 


数字 13. 37 只 保留 一 位 小 数 ， 13. 4 


5-1 Number 对 象 的 toFixed 
方法 的 应 用 


于 存储 一 系列 字符 ,就 像 "helloworld" 。 一 个 字符 串 可 
以 使 用 单 引 号 或 双 引 号 。 字 符 串 对 象 常用 的 属性 及 方法 如 表 5-2 所 示 。 


表 5-2 字符 串 对 象 常用 的 属性 及 方法 




















属性 /方法 描 述 
constructor 属性 对 创建 该 对 象 的 函数 的 引用 
length 属性 字符 串 的 长 度 
prototype 属性 允许 用 户 向 对 象 添 加 属性 和 方法 
anchor() 方 法 创建 HTML 锚 
blink() 方 法 显示 闪 动 字符 串 
bold() 方 法 使 用 粗 体 显示 字符 串 





charAt() 方 法 


返回 在 指定 位 置 的 字符 





charCodeAt() 方 法 


返回 在 指定 位 置 的 字符 的 Unicode 编码 











concat() 方 法 连接 字符 串 
fixed() 方 法 以 打字 机 文本 显示 字符 串 
fontcolor() 方 法 使 用 指定 的 颜色 来 显示 字符 串 





fontsize() 方 法 


使 用 指定 的 尺寸 来 显示 字符 串 





fromCharCode() 方 法 


从 字符 编码 创建 一 个 字符 串 











indexOf() 方 法 检索 字符 串 
match() 方 法 找到 一 个 或 多 个 正则 表达 式 的 匹配 
split() 方 法 把 字符 串 分 割 为 字符 串 数组 





substring() 方 法 


提取 字符 串 中 两 个 指定 的 索引 号 之 间 的 字符 
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toUpperCase() 方 法 


【 例 5-5】 使 字符 串 以 斜体 显示 。 


<html> 
<head> 





把 字符 串 转换 为 大 写 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 


<script type="text/javascript"> 
Var s="how are Youn7 


document .write( s.italics()); 


</script> 
</head> 
<body> 
</body> 
</html> 
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以 上 代码 执行 的 结果 如 图 5-2 所 示 。 
bow are you 
图 5-2 字符 串 以 斜体 显示 


3. 日 期 对 象 
日 期 对 象 用 于 处 理 日 期 和 时 间 。 使 用 var myDate 一 new Date() 可 创建 日 期 对 象 。 日 
期 对 象 常用 的 属性 及 方法 如 表 5-3 所 示 。 


表 5-3 日 期 对 象 常用 的 属性 及 方法 
































属性 /方法 描 述 
constructor 属性 返回 对 创建 此 对 象 的 Date 函数 的 引用 
prototype 属性 允许 用 户 向 对 象 添加 属性 和 方法 
date() 方 法 返回 当前 的 日 期 和 时 间 
getDate() 方 法 从 Date 对 象 返回 一 个 月 中 的 某 一 天 (1 一 31) 
getDay() 方 法 从 Date 对 象 返回 一 周 中 的 某 一 天 (0 一 6) 
getHours() 方 法 返回 Date 对 象 的 小 时 (0 一 23) 
setDate() 方 法 设置 Date 对 象 中 月 的 某 一 天 (1 一 31) 
setMonth() 方 法 设置 Date 对 象 中 的 月 份 (0 一 11) 
setMinutes() 方 法 设置 Date 对 象 中 的 分 钟 (0 一 59) 
toString() 方 法 把 Date 对 象 转换 为 字符 串 





【 例 5-6】 输出 当前 的 年 月 日 。 


<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript"> 
Var d=new Date (); 
var txt=" 今 天 是 "+d.getFullYear ()+" 年 "+ (d.getMonth()+1)+" 月 "+d.getDate ()+" 
日 ": 
document .write (txt) 7 
</script> 
</head> 
<body> 
</body> 
</html> 


以 上 代码 的 执行 结果 如 图 5-3 所 示 。 
今天 是 2016 年 12 月 7 日 
图 5-3 输出 当前 的 年 月 日 
4. Array( 数 组 ) 对 象 
数组 对 象 的 作用 是 : 使 用 单独 的 变量 名 来 存储 一 系列 的 值 。 数 组 对 象 常用 的 属性 及 方 


法 如 表 5-4 所 示 。 
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表 5-4 数组 对 象 常用 的 属性 及 方法 
































属性 /方法 描 述 
constructor 属性 返回 对 创建 此 对 象 的 Date 函数 的 引用 
prototype 属性 允许 用 户 向 对 象 添加 属性 和 方法 
length 属性 设置 或 返回 数组 中 元 素 的 数目 
concat() 方 法 连接 两 个 或 更 多 的 数组 ,并 返回 结果 
join() 方 法 把 数组 的 所 有 元 素 放 入 一 个 字符 串 。 元 素 通 过 指定 的 分 隔 符 进行 分 隔 
sort() 方 法 对 数组 的 元 素 进行 排序 
splice() 方 法 删除 元 素 , 并 向 数组 添加 新 元 素 
toString() 方 法 把 数组 转换 为 字符 串 ,并 返回 结果 
setMinutes() 方 法 设置 Date 对 象 中 的 分 钟 (0 一 59) 
toString() 方 法 把 Date 对 象 转换 为 字符 串 





【 例 5-7】 用 逗号 连接 数组 的 元 素 并 使 之 成 为 字符 串 。 


<script type= "text/javascript"> 
Var arr=new Array (3); 
arr[0]="how"; 
arr[l]="are"; 
arr[2]="you"; 
var s=arr.join(","); 
document .write(s); 
</script> 


5. Boolean( 布 尔 ) 对 象 
Boolean( 布 尔 ) 对 象 用 于 将 非 布 尔 值 转换 为 布尔 值 (true 或 者 false)。 布 尔 对 象 常 用 的 
属性 及 方法 如 表 5-5 所 示 。 


表 5-5 布尔 对 象 常用 的 属性 及 方法 

















属性 /方法 描 述 
constructor 属性 返回 对 创建 此 对 象 的 Boolean 函数 的 引用 
prototype 属性 允许 用 户 向 对 象 添加 属性 和 方法 
toString() 方 法 把 Date 对 象 转换 为 字符 串 
valueOf() 方 法 返回 Boolean 对 象 的 原始 值 





【 例 5-8】 将 布尔 值 转换 为 字符 串 。 


Var bool=new Boolean (1); 
var myvar=bool .toSstring(); 


6.Math 对 象 

Math 对 象 的 作用 是 执行 数学 计算 , 它 提供 了 标准 的 数学 常量 和 函数 库 。Math 对 象 常 
用 的 属性 及 方法 如 表 5-6 所 示 。 
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表 5-6 Math 对 象 常用 的 属性 及 方法 












































属性 /方法 描 述 
E 属性 返回 算术 常量 e, 即 自然 对 数 的 底数 ( 约 等 于 2.718) 
LN2 属性 返回 2 的 自然 对 数 ( 约 等 于 0.693) 
LOG2E 属性 返回 以 2 为 底 的 e 的 对 数 ( 约 等 于 1.414) 
PI 属性 返回 圆周 率 ( 约 等 于 3. 14159) 
SQRT2 属性 返回 2 的 平方 根 ( 约 等 于 1.414) 
abs(x) 方 法 返回 数 的 绝对 值 
acos(x) 方 法 返回 数 的 反 余 弦 值 
exp(x) 方 法 返回 e 的 指数 
floor(x) 方 法 对 数 进 行 下 舍 人 
pow(Cxyy) 方 法 返回 x 的 y 次 者 
random() 方 法 返回 0 一 1 之 间 的 随机 数 
round(x) 方 法 把 数 四 舍 五 人 为 最 接近 的 整数 
sqrt(x) 方 法 返回 数 的 平方 根 





【 例 5-9〗 求 2 的 3 次 方 。 


<script type= "text/javascript"> 
document .write (Math.pow(2,3)); 
</script> 


7. RegExp 对 象 
RegExp 对 象 表示 正则 表达 式 , 它 是 对 字符 串 执行 模式 匹配 的 强大 工具 。 
创建 RegExp 对 象 的 语法 : 


new RegExp (pattern, attributes); 


参数 pattern 是 一 个 字符 串 ,指定 了 正则 表达 式 的 模式 或 其 他 正则 表达 式 。 
attributes 是 一 个 可 选 的 字符 串 . 包 含 属性 "g"、"i" 和 "m" ,分别 用 于 指定 全 局 匹配 、 Ce 
小 写 匹配 和 多 行 匹 配 。RegExp 对 象 常用 的 属性 及 方法 如 家 5-7 所 示 。 


表 5-7 RegExp 对 象 常用 的 属性 及 方法 


























属性 /方法 描 述 
global 属性 RegExp 对 象 是 否 具 有 标志 g 
ignoreCase 属性 RegExp 对 象 是 否 具 有 标志 i 
lastIndex 属性 一 个 整数 ,标示 开始 下 一 次 匹配 的 字符 位 置 
multiline 属性 RegExp 对 象 是 否 具有 标志 m 
source 属性 正则 表达 式 的 源 文本 
compile() 方 法 编译 正则 表达 式 
exec() 方 法 检索 字符 串 中 指定 的 值 。 返 回 找到 的 值 , 并 确定 其 位 置 
test() 方 法 检索 字符 串 中 指定 的 值 。 返 回 true 或 false 
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【 例 5-10】 在 字符 串 中 全 局 搜索 "man", 并 用 "person" 蔡 换 。 然 后 通过 compile() 方 
法 ,改变 正则 表达 式 , 用 "person" 替 换 "man" 或 "woman"。 


<script type="text/javascript"> 
Var str="Every man in the world! Every woman on earth!"; 
patt=/man/g; 
str2=str.replace (patt, "person"); 
document .write(str2+"<br />"); 
Patt=/ (wo) ?man/g; 
patt.compile (patt); 
str2=str.replace (patt, "person"); 
document .write (str2); 
</script> 


5.3 JavaScript 框架 


随 着 Web 2. 0 的 快速 发 展 , 以 及 浏览 器 端 所 承载 的 工作 越 来 越 大 ,在 不 太 影响 性 能 的 情况 
下 ,开发 者 都 习惯 尽量 让 浏览 器 多 完成 一 些 操 作 , 以 减轻 服务 器 的 压力 和 带宽 费用 等 。 所 以 
JavaScript 已 经 成 为 Web 开发 最 基本 的 要 求 之 一 。 而 在 现实 的 敏捷 开发 中 ,我 们 通常 会 选择 
一 个 JavaScript 框架 来 取代 烦琐 的 本 地 JavaScript 的 编写 。 这 样 会 节省 很 多 的 时 间 , 写 的 代码 
也 很 清晰 明了 。 在 对 框架 深入 学 习 的 同时 ,对 JavaScript 脚本 也 会 理解 得 更 透彻 一 些 。 

在 JavaScript 框架 出 现 之 前 ,开发 人 员 只 能 在 页 面 上 进行 jQuery 操作 。 这 种 方式 很 容易 
引起 开发 人 员 对 编码 操作 的 困惑 ,而 且 不 易 管 理 。Backbone 是 最 初 的 领跑 者 ,提供 了 一 个 基本 
的 结构 和 组 织 以 及 开发 者 友好 的 框架 ,如 Angular 和 Ember, 如 今 得 到 了 许多 项 目 开 发 者 的 青 
睐 。 我 们 常常 会 名 视 开 发 人 员 的 专业 背景 ,而 这 些 专业 背景 很 可 能 会 使 他 们 发 现 一 种 流行 的 
框架 ,这 种 框架 给 人 以 很 直观 的 感觉 ,并 且 使 得 JavaScript 框架 更 容易 被 理解 。 

那么 什么 是 JavaScript 框架 ,JavaScript 框架 通常 是 指 以 JavaScript 语言 为 基础 搭建 的 
编程 框架 。 它 是 预先 写 好 的 JavaScript 代码 集 。 这 些 JavaScript 框架 也 被 称 为 JavaScript 
库 ,JavaScript 框架 帮助 开发 者 快速 设计 和 开发 动态 网 站 ,给 开发 者 提供 很 多 的 便利 。 
JavaScript 库 封装 了 很 多 预定 义 的 对 象 和 实用 函数 ,能 帮助 使 用 者 轻松 建立 有 高 难度 交互 
的 Web 2.0 特性 的 富 客户 端 页 面 , 并 且 兼 容 几 个 主要 的 浏览 器 。 下 面 是 对 目前 流行 的 
JavaScript 库 的 介绍 和 对 比 .重点 介绍 3 种 。 


5.3.1 Prototype 


Prototype 是 最 早 成 型 的 JavaScript 库 之 一 ,对 JavaScript 的 内 置 对 象 (例如 String 对 
象 .Array 对 象 等 ) 做 了 大 量 的 扩展 。 现 在 还 有 很 多 项 目 使 用 Prototype。Prototype 可 以 看 
作 把 很 多 好 的 、 有 用 的 JavaScript 的 方法 组 合 在 一 起 而 形成 的 JavaScript 库 。 使 用 者 可 以 
在 需要 的 时 候 随时 将 其 中 的 几 段 代码 抽出 来 放 进 自己 的 脚本 里 。 但 是 由 于 Prototype 成 型 
年 代 早 ,从 整体 上 对 于 面向 对 象 的 编程 思想 把 握 得 不 是 很 到 位 ,导致 了 其 结构 的 松散 。 不 过 
现在 Prototype 也 在 慢 慢 改进 。 
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Prototype 的 特点 。 

(1) 对 字符 串 进 行 各 种 处 理 。 

(2) 使 用 枚 举 的 方式 访问 集合 对 象 。 

(3) 以 更 简单 的 方式 进行 常见 的 DOM 操作 。 

(4) 使 用 CSS 选择 符 定 位 页 面 元 素 。 

(5) 发 起 ajax 方式 的 HTTP 请 求 并 对 响应 进行 处 理 。 
(6) 监听 DOM 事件 并 对 事件 进行 处 理 。 


ss32 YUI 


YUI 是 由 Yahoo 公司 开发 的 一 套 完备 的 ,扩展 性 良好 的 有 高 交互 性 的 网 页 程序 工具 
集 。YUI 封装 了 一 系列 比较 丰富 的 功能 ,例如 DOM 操作 和 ajax 应 用 等 ,同时 还 包括 了 几 
个 核心 的 CSS 文件 。 该 库 本 身 的 文档 极其 完备 ,代码 编写 也 非常 规范 。YUI 包含 完整 的 说 
明文 件 , 它 包含 了 工具 与 控件 两 种 元 件 , 以 及 一 些 CSS 资源 。 

1. YUI 工具 

(1) 动画 : 协助 实现 位 置 移动 ,大 小 改变 .透明度 和 其 他 的 网 页 效果 。 

(2) 浏览 器 历史 记录 管理 工具 : 协助 网 页 程式 使 用 浏览 器 的 上 一 页 与 书签 工具 。 

(3) 连 线 工具 : 协助 管理 跨 浏览 器 的 XMLHttpRequest 功能 。 它 也 整合 了 表单 传送 、 
错误 处 理 .callback 和 档案 上 传 。 

(4) 资料 源 : 给 其 他 组 件 提供 通用 可 配置 接口 与 种 种 资料 ,如 从 简单 的 JavaScript 阵列 
到 线 上 服务 器 ,并 通过 XHR 来 互动 。 

(5) 元 素 : 为 DOM 里 的 HTML 元 素 提供 包装 样式 ,从 而 简化 一 般 工 作 如 加 入 监听 者 
(listener) ,对 DOM 操作 ,以 及 存 取 属性 。 

(6) DOM: 为 一 般 的 DOM 脚本 作业 提供 帮助 , 它 包 括 元 素 定 位 与 CSS 样式 管理 。 

(7) 即 拖 即 放 : 为 即 拖 即 放 的 开发 (建立 与 管理 可 在 网 页 上 拖 放 的 物件 ) 提 供 帮 助 。 

(8) 事件 : 提供 开发 者 对 浏览 器 事件 (如 鼠标 单 击 与 键盘 按键 ) 的 简易 、 安 全 的 存 取 。 
它 也 提供 相关 功能 以 应 付 用 户 出 版 与 订阅 自 订 事件 的 需求 。 

2. YUI 控件 

(1) 自动 完成 : 为 用 户 输入 的 文字 互动 提供 自动 完成 功能 。 它 支持 广泛 的 资料 源 格 
式 。 它 也 透 过 XMLHttpReqeust 支持 服务 器 端 资料 源 。 

(2) 按钮 : 让 用 户 制 作 方面 的 功能 像 传 统 HTML 表单 按钮 般 多 样 、 图 形 化 。 

(3) 日 历 : 图 形式 ,动态 的 控制 ,用 于 日 期 选择 。 

(4) 容器 : 支持 大 量 的 DHTML 视窗 规范 ,包括 提示 框 (Tooltip) .面板 、 对 话 框 , 简 易 
对 话 框 、 模 组 与 覆盖 层 (Overlay) 。 

(5) 资料 表 : 简单 且 强 大 的 应 用 程序 接口 ,用 来 显示 网 页 上 屏幕 阅读 器 可 存 取 的 表 资 
料 。 值 得 关注 的 功能 包括 可 排序 的 栏 .分 页 .卷轴 、 行 选取 .可 放大 缩小 的 栏 以 及 线 上 编辑 。 

(6) 纪录 器 : 提供 一 种 快速 简单 的 方式 来 写 入 日 志 信 息 到 Mozilla Firefox 的 Firebug 
扩充 插件 画面 终端 或 者 Safari JavaScript 终端 。 

(7) 表单 : 提供 鼠标 光标 移 过 时 弹出 列表 的 方式 。 

(8) 滑 块 : 提供 一 般 性 滑 块 组 件 让 用 户 可 在 有 限 范围 内 以 单 轴 或 者 双 轴 选择 值 。 
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(9) 分 页 检视 : 提供 以 分 页 方式 来 检视 内 容 的 功能 。 
(10) 树 状 检视 : 产生 目录 树 ,其 下 面 的 节点 可 以 缩放 。 
3. YUI CSS 资源 
(1) CSS 页 面 网 格 : 七 种 基本 线 框 外 带 附 加 组 件 , 支 持 超过 1000 种 的 网 页 布局 。 
(2) 标准 CSS 字 型 集 : 标准 化 跨 浏览 器 字 型 家 族 与 尺寸 设 定 。 
(3) 标准 CSS 重 设 : 用 于 移 除 页 边 空白 并 标准 化 跨 浏览 器 时 显示 一 般 元 素 的 问题 。 
4. YUI 实例 








执行 以 上 代码 ,如 图 5-4 所 示 。 
单 击 之 后 ,结果 如 图 5-5 所 示 。 





图 5-4 修改 网 页 的 内 容 图 5-5 内 容 修改 成 功 


5.3.3 ExtJS 

ExtJS 通常 简称 为 Ext, 原 本 是 对 YUI 的 扩展 ,主要 用 于 创建 前 端 用 户 界面 ,如 今 已 经 
发 展 到 可 以 利用 包括 jQuery 在 内 的 各 种 JavaScript 框架 作为 基础 库 ,而 Ext 作为 界面 的 扩 
展 库 来 使 用 。Ext 可 以 用 来 开发 有 漂亮 外 观 的 客户 端 应 用 ,能 使 B/S 应 用 更 加 具有 灵活 性 。 
但 是 由 于 Ext 侧重 于 界面 ,本 身 比 较 腾 肿 ,所 以 使 用 之 前 请 先 权 衡 利 束 。 另 外 ,需要 注意 的 
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是 ,Ext 并 非 完 全 免费 ,如 果 用 于 商业 用 途 , 需 要 付费 并 获得 授权 许可 。 

1. ExtJS 的 特点 

(1) 纯 HTML/CSS 十 JavaScript 技术 ,重新 定义 表示 层 的 耦合 。 

(2) 基于 纯 HTMILVCSS 十 JavaScript 技术 ,提供 丰富 的 跨 浏览 器 用 户 界面 组 件 ,灵活 采 
用 JSON/XML 数据 源 进行 开发 ,使 得 服务 端 表示 层 的 负荷 真正 减轻 ,从 而 达到 客户 端的 
MVC 应 用 。 

(3) 集成 多 种 JavaScript 底层 库 ,满足 开发 者 不 同 的 需求 。 

(4) Ext 初期 仅 是 对 YUI 的 对 话 框 进行 扩展 ,后 来 逐渐 有 了 自己 的 特色 , 深 受 网 友 的 喜 
爱 。 发 展 至 今 ,Ext 除 YUI 外 还 支持 jQuery Prototype 等 的 JavaScript 库 ,让 用 户 可 以 自由 
地 选择 。 

(5) 多 浏览 器 支持 支持 多 平台 下 的 主流 浏览 器 。 

2. ExtS 的 优点 

(1) UI 组 件 丰富 ,外 观 漂亮 。ExtJS 库 有 着 丰富 且 漂 亮 的 UI 组 件 ,大 大 缩短 了 开发 周 
期 ,而 且 组 件 拥有 漂亮 的 布局 ,经 过 简单 的 调用 与 配置 就 可 以 实现 不 错 的 界面 布局 。ExtJS 
提供 的 各 种 组 件 可 以 用 更 加 标准 的 方式 展示 数据 ,降低 了 开发 难度 。 

(2) 浏览 器 兼容 性 好 。 使 用 ExtJS 对 浏览 器 没有 任何 要 求 。 可 以 说 是 一 种 绿色 的 客户 
端 实现 方式 。ExtUS 基本 可 以 运行 于 现在 主流 的 浏览 器 中 。 

(3) 有 很 多 动画 。 效 果 做 得 很 不 错 , 提 高 了 用 户 的 感知 度 。 

(4) 与 后 台 代 码 无 关 。 不 管 后 台 用 什么 语言 开发 都 不 会 受 影响 。 

(5) 将 Web 程序 向 桌面 系统 转化 。ExtJS 最 大 的 优势 在 于 它 将 Web 应 用 程序 的 操作 
方式 向 传统 桌面 应 用 程序 的 操作 方式 进行 转化 甚至 消除 了 这 种 差异 ,从 根本 上 提高 了 用 户 
的 使 用 体验 ,这 是 ExtJS 应 用 前 景 广阔 的 主要 原因 。 

(6) 相对 丰富 的 文档 和 示例 。 毫 无 疑问 ,ExtJS 附带 的 例子 和 开发 文档 十 分 吸引 程序 
员 , 它 的 文档 做 得 确实 不 错 。 


3. ExtJS 的 缺点 
(1) 体积 较 大 ,速度 稍 慢 。 由 于 使 用 了 大 量 的 UI 组 件 ,所 以 体积 较 大 ,导致 页 面 加 载 速 
度 比 较 慢 。 


(2) 收费 。 因 为 ExtJS 太 优 秀 了 ,所 以 从 ExtJS 2.0 以 后 的 版 本 都 是 收费 的 。 也 许 这 不 
能 算是 它 的 缺点 ,但 这 确实 阻碍 了 它 的 推广 与 应 用 。 

(3) 没有 合适 的 开发 利器 。 毫 无 疑问 ,一 个 好 的 开发 工具 可 以 大 大 地 提高 编码 的 速度 ， 
但 是 对 于 ExtJS, 始 终 没有 一 个 完美 的 开发 工具 ,可 以 推荐 的 有 Aptana Studio、Spket IDE 
和 Spket 提供 的 提示 文件 ,但 是 都 各 有 优 缺 点 ,都 不 完美 ,只 能 一 边 看 SDK 一 边 写 代码 。 

(4) 没有 界面 设计 工具 。 虽 然 有 人 提供 了 一 个 在 线 的 界面 设计 工具 ,但 是 和 Visual 
Studio 提供 的 ASP. NET 设计 工具 相 比 ,可 以 说 有 天 壤 之 别 。 因 此 ,只 能 一 边 预 览 , 一 边 写 
代码 。 

(5) 文档 不 全 。 昌 然 ExtJS 提供 的 文档 很 丰富 ,但 还 是 跟 不 上 源 代码 的 更 新 速度 ,所 
以 ,经 常 要 通过 看 源 代 码 , 调 试 才能 真正 解决 问题 。 

(6) 不 能 编译 。 这 一 点 可 以 说 是 JavaScript 的 缺点 (如 果 能 编译 ,就 不 叫 JavaScript 
了 )。 在 实际 的 开发 过 程 中 ,经 常会 输 错 一 些 代 码 ,比如 有 大 小 写 错误 等 ,不 能 通过 编译 得 到 
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反馈 ,只 能 在 运行 时 排 错 ,导致 开发 的 效率 比较 低下 。 
4. ExtJS 实例 





<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF- 8"> 
<title>Insert title here</title> 
<script src= "ext-al1.js" type="text/jscript"></script> 
<script src="ext-lang- zh CN.js" type="text/javascript"></script> 
<link href="ext-all.css" rel="stylesheet" type="text/css" /> 
<script type= "text/javascript"> 

Ext .onReady (function () 

{ 

Ext .MessageBox.alert ('helloworld', 'Hello World.'); 

]) 7 
</script> 
</head> 
<body> 
</body> 
</html> 


执行 以 上 代码 ,创建 一 个 窗口 ,效果 如 图 5-6 


所 示 。 
5.3.4 jQuery Helo World. 
jQuery 是 一 个 快速 ,简洁 的 JavaScript 框架 ， 确定 
是 继 Prototype 之 后 又 一 个 优秀 的 JavaScript 代码 
库 (或 JavaScript 框架 )。jQuery 设计 的 宗旨 是 倡 图 5-6 ”ExtjJS 窗口 


导 写 更 少 的 代码 ,做 更 多 的 事情 。 它 封装 了 
JavaScript 常用 的 功能 代码 ,提供 一 种 简便 的 JavaScript 设计 模式 ,优化 了 HTML 文档 操 
作 、 事 件 处 理 ,动画 设计 和 ajax 交互 ,是 一 个 轻 量 级 框架 ,兼容 CSS 3, 兼 容 各 种 浏览 器 。 但 
是 不 能 向 后 兼容 ,新 版 本 不 能 兼容 前 期 的 版 本 ,在 同一 页 面 上 使 用 多 个 插件 时 ,很 容易 碰 到 
冲突 现象 ;在 大 型 框架 中 ,jQuery 核心 代码 库 对 动画 和 特效 的 支持 相对 较 差 。 

1. jQuery 的 特点 

(1) 一 款 轻 量 级 的 JavaScript 框架 。jQuery 核心 JavaScript 文件 才 几 十 KB, 不 会 影响 
页 面 加 载 的 速度 。 与 ExUS 相 比 要 轻便 很 多 。 

(2) 丰富 的 DOM 选择 器 。jQuery 的 选择 器 用 起 来 很 方便 ,好 比 要 找到 某 个 DOM 对 
象 的 相 邻 元 素 JavaScript 可 能 要 写 好 几 行 代码 ,而 jQuery 一 行 代码 就 可 以 解决 问题 。 再 比 
如 要 将 一 个 表格 的 隔行 变色 ,jQuery 也 是 一 行 代码 就 可 以 解决 问题 。 

(3) 链 式 表达 式 。jQuery 的 链 式 操作 可 以 把 多 个 操作 写 在 一 行 代码 里 ,会 更 加 简洁 。 

(4) 事件 ,样式 \ 动 画 支 持 。jQuery 还 简化 了 JavaScript 操作 CSS 的 代码 ,并 且 代 码 的 
可 读 性 也 比 JavaScript 要 强 。 

(5) 支持 ajax 操作 。jQuery 简化 了 ajax 操作 ,后 台 只 需 返 回 一 个 JSON 格式 的 字符 串 
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就 能 完成 与 前 台 的 通信 。 

(6) 跨 浏览 器 兼容 。jQuery 基本 兼容 了 现在 主流 的 浏览 器 ,不 用 再 为 浏览 器 的 兼容 问 
题 而 伤 透 脑筋 。 

(7) 插件 扩展 开发 。 jQuery 有 着 丰富 的 第 三 方 的 插件 ,例如 : 树 形 菜单 .日 期 控件 、 图 
片 切 换 插件 、 弹 出 窗口 等 基本 前 台 页 面 上 的 组 件 都 有 对 应 的 插件 ,用 jQuery 插件 做 出 来 的 
效果 很 炫 ,并 且 可 以 根据 自己 的 需要 去 改写 和 封装 插件 ,简单 实用 。 

(8) 可 扩展 性 强 。jQuery 提供 了 扩展 接口 : jQuery. extend(Cobject) ,可 以 在 jQuery 的 
命名 空间 上 增加 新 函数 。jQuery 的 所 有 插件 都 是 基于 这 个 扩展 接口 开发 的 。 

2. jQuery 的 优点 

(1) jQuery 实现 了 脚本 与 页 面 的 分 离 。 这 样 我 们 可 以 实现 灵活 性 非常 强 的 清晰 页 面 代 
码 。jQuery 让 JavaScript 代码 从 HTML 页 面 代 码 中 分 离 出 来 ,就 像 数 年 前 CSS 让 样式 代 
码 与 页 面 代 码 分 离开 一 样 。 

(2) 最 少 的 代码 做 最 多 的 事情 。 最 少 的 代码 做 最 多 的 事情 ,这 是 jQuery 的 口号 ,而 且 
名 副 其 实 。 使 用 它 的 高 级 选择 器 ,开发 者 只 需 编 写 几 行 代码 就 能 实现 令 人 惊奇 的 效果 。 开 
发 者 无 须 过 于 担忧 浏览 器 的 差异 , 它 除了 仍 完 全 支持 ajax, 而 且 拥 有 许多 提高 开发 者 编程 效 
率 的 其 他 抽象 概念 。 

(3) 性 能 支持 得 比较 好 。 在 大 型 JavaScript 框架 中 ,jQuery 对 性 能 的 理解 最 好 。 尽 管 
不 同 版 本 拥有 众多 新 功能 ,其 最 精简 版 本 只 有 18KB 大 小 ,这 个 数字 已 经 很 难 再 减少 。 
jQuery 的 每 一 个 版 本 都 有 极 大 的 性 能 提高 。 如 果 将 其 与 新 一 代 具 有 更 快 JavaScript 引擎 的 
浏览 器 (如 火狐 3 和 谷歌 Chrome) 配 合 使 用 ,开发 者 在 创建 Web 应 用 时 将 拥有 明显 的 速度 
优势 。 

(4) 它 是 一 个 “标准 ”。 之 所 以 使 用 引号 ,是 因为 jQuery 并 非 只 有 一 个 官方 标准 。 但 是 
业内 对 jQuery 的 支持 已 经 非常 广泛 。 谷 歌 不 但 自己 使 用 它 , 还 提供 给 用 户 使 用 。 另 外 戴 
尔 、 新 闻 聚 合 网 站 Digg、WordPress、Mozilla 和 许多 其 他 厂商 也 在 使 用 它 。 微 软 甚至 将 它 整 
合 到 Visual Studio 中 。 如 此 多 的 重量 级 厂商 支持 该 框架 ,用 户 完全 可 以 对 其 的 未 来 放心 ， 
大 胆 地 将 其 投入 使 用 。 

(5) 插件 开发 。 基 于 jQuery 开发 的 插件 目前 已 经 大 约 有 数 千 个 。 开 发 者 可 使 用 插件 
来 完成 表单 确认 、 图 表 种 类 、 字 有 段 提示 动画、 进度 条 等 任务 。jQuery 社区 已 经 成 长 为 一 个 
生态 系统 。 这 一 点 进一步 证 明了 它 是 一 个 安全 的 选择 。 而 且 jQuery 正在 主动 与 “竞争 对 
手 ” 合 作 , 例 如 Prototype。 它 们 似乎 在 推进 JavaScript 的 整体 发 展 ,而 不 仅仅 是 在 图 谋 一 己 
之 私 。 

(6) 节约 学 习 成 本 。 当 然 要 想 真正 学 习 jQuery, 开 发 者 还 是 需要 投入 一 点 时 间 ,如果 要 
编写 大 量 代 码 或 自主 插件 .更 是 如 此 。 但 是 ,开发 者 可 以 采取 “各 个 击破 ”的 方式 ,而 且 
jQuery 提供 了 大 量 的 示例 代码 ,入 门 是 一 件 非常 容易 的 事情 。 建 议 开发 者 在 编写 某 类 代码 
前 ,首先 看 一 下 是 否 有 类 似 插件 ,然后 看 一 下 实际 的 插件 代码 ,了 解 一 下 其 工作 原理 。 简 而 
言 之 ,学 习 jQuery 不 需要 开发 者 投入 太 多 ,就 能 够 迅速 开始 开发 工作 ,然后 逐渐 提高 技巧 。 

(7) 让 JavaScript 编程 变 得 有 趣 。 使 用 jQuery 是 一 件 充满 乐趣 的 事情 。jQuery 简洁 
而 强大 ,开发 者 能 够 迅速 得 到 自己 想 要 的 结果 。 它 解决 了 许多 JavaScript 难题 。 通 过 一 些 
基础 性 的 改进 ,开发 者 可 以 真正 去 思考 开发 下 一 代 Web 应 用 ,不 再 因为 语言 或 工具 的 差劲 
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而 烦恼 。 应 相信 它 的 “用 最 少 的 代码 做 最 多 的 事情 ”的 口号 。 

3. jQuery 的 缺点 

(1) 不 能 向 后 兼容 。 每 一 个 新 版 本 不 能 兼容 早期 的 版 本 。 举 例 来 说 ,有 些 新 版 本 不 再 
支持 某 些 选择 器 ,新 版 jQuery 却 没有 保留 对 它们 的 支持 ,而 只 是 简单 地 将 其 移 除 。 这 可 能 
会 影响 到 开发 者 已 经 编写 好 的 代码 或 插件 。 

(2) 插件 兼容 性 。 与 上 一 点 类 似 , 当 新 版 jQuery 推出 后 ,如 果 开 发 者 想 升级 ,要 看 插件 
作者 是 否 支持 。 通 常情 况 下 ,在 最 新 版 的 jQuery 下 , 现 有 插件 可 能 无 法 正常 使 用 。 开 发 者 
使 用 的 插件 越 多 ,这 种 情况 发 生 的 概率 也 越 高 。 

(3) 多 个 插件 冲突 。 在 同一 页 面 上 使 用 多 个 插件 时 ,很 容易 磁 到 冲突 现象 ,尤其 是 这 些 
插件 依赖 相同 的 事件 或 选择 器 时 最 为 明显 。 这 虽然 不 是 jQuery 自身 的 问题 ,但 又 确实 是 一 
个 难于 调试 和 解决 的 问题 。 

(4) 对 动画 和 特效 的 支持 差 。 在 大 型 框架 中 ,jQuery 核心 代码 库 对 动画 和 特效 的 支持 
相对 较 差 。 但 实际 上 这 不 是 根本 性 的 问题 。 目 前 有 一 个 单独 的 jQuery UI 项 目 和 众多 插件 
来 弥补 这 一 点 。 

4. jQuery 实例 


























<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type= "text/javascript" src="/jquery/jquery.js"></script> 
<script type= "text/javascript"> 
$ (document) .ready (function (){ 
$("button") .click (function(){ 
$(".test") .hide () 7 
]) 7 
]) 7 
</script> 
</head> 
<body> 
<h2 class= "test"> 这 是 一 个 标题 < /h2> 
<p class="test"> 这 是 一 个 段落 </p> 
<P> 这 是 另 一 个 段落 </P> 
<button type= "button"> 单 击 隐 藏 段落 < /button> 
</body> 
</html> 





执行 代码 ,效果 如 图 5-7 所 示 。 
单 击 按钮 之 后 ,结果 如 图 5-8 所 示 。 

















这 是 一 个 标题 

这 是 一 个 段落 

这 是 另 一 个 段落 这 是 另 一 个 段落 
图 5-7 jQuery 实例 图 5-8 隐藏 段落 
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Dojo 的 强大 之 处 在 于 Dojo 提供 了 很 多 其 他 JavaScript 库 所 没有 提供 的 功能 。 例 如 离 
线 存储 的 API、 生 成 图 标的 组 件 、 基 于 SVG/VML 的 矢量 图 形 库 和 对 Comet 的 支持 等 。 
Dojo 是 一 款 非常 适合 企业 级 应 用 的 JavaScript 库 , 并 且 得 到 了 IBM、SUN 和 BEA 等 一 些 大 
公司 的 支持 。 但 是 Dojo 的 缺点 也 是 很 明显 的 : 学 习 曲 线 陡 ,文档 不 齐全 ,最 严重 的 就 是 
API 不 稳定 ,每 次 升级 都 可 能 导致 已 有 的 程序 失效 。 但 是 自从 Dojo 的 1.0.0 版 出 现 以 后 ， 
情况 有 所 好 转 。Dojo 还 是 一 个 很 有 发 挥 潜力 的 库 。 

1. Dojo 的 特点 

(1) Dojo 是 一 个 符合 AMD 规范 的 企业 级 框架 (Dojo 是 一 个 重量 级 框架 ) 。 

(2) Dojo 全 面 支持 异步 加 载 JS 机 制 ( 即 支持 通过 require 异步 加 载 JS 模块 ,通过 
define 定义 符合 AMD 规范 的 标准 JS 直接 对 象 ( 模 块 ))。 

(3) Dojo 不 仅 提供 了 针对 JavaScript 的 语句 优化 (Dojo 核心 语法 与 jQuery 完全 不 同 ， 
需要 额外 学 习 ) ,还 提供 了 所 有 UI 组件。 

(4) Dojo 支持 IE 6 以 上 版 本 浏览 器 ,Dojo 帮助 我 们 处 理 浏览 器 兼容 性 问题 ,所 以 不 需 
要 担心 Web 页 面 是 否 在 某 些 浏览 器 中 可 用 。 

(5) Dojo 提供 了 打包 工具 ,可 以 优化 JavaScript 代码 ,并 且 只 生成 部 署 应 用 程序 所 需 的 
最 小 Dojo 包 集 合 。 

2. Dojo 与 jQuery 相 比 所 具有 的 优点 

(1) Dojo 支持 IE 6 版 本 以 上 的 浏览 器 ,jQuery 不 再 支持 IE 9 以 下 版 本 的 浏览 器 (国内 
IE 9 以 下 版 本 的 浏览 器 份额 依旧 占据 半壁 江山 )。 

(2) Dojo 不 仅 提 供 jQuery 的 JS 优化 操作 ,还 提供 UI 组 件 。 

(3) Dojo 中 的 所 有 功能 都 基于 异步 JS 实现 ,jQuery 需要 借助 第 三 方 的 异步 加 载 框架 
实现 异步 加 载 JS。 


5.3.6 MooTools 


MooTools 是 一 套 轻 量 、 简 洁 、 模 块 化 和 面向 对 象 的 JavaScript 框架 。MooTools 的 语 
法 几乎 和 Prototype 一 样 , 但 提供 了 更 为 强大 的 功能 .更 好 的 扩展 性 和 兼容 性 。 其 模块 化 思 
想 非常 优秀 ,核心 代码 只 有 8KB 大 小 。 无 论 用 到 哪个 模块 都 可 及 时 导入 ,即使 是 完整 版 大 
小 也 不 超过 160KB。MooTools 具有 完全 彻底 的 面向 对 象 的 编程 思想 ,语法 简洁 直观 ,文档 
完善 ,是 一 个 非常 不 错 的 JavaScript 库 。 

总 之 ,每 个 JavaScript 库 都 有 各 自 的 优点 和 缺点 ,同时 也 有 各 自 的 支持 者 和 反对 者 。 














5.4 ”综合 实例 


本 节 我 们 通过 一 个 实例 来 体会 JavaScript 框架 编程 的 优越 性 。 
权 1 
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5.4.1 需求 描述 


利用 JavaScript 的 框架 ExUS 完成 表单 的 制作 ,表单 样式 如 图 5-9 所 示 。 验 证 文本 框 
为 必 输 入 内 容 , 验 证 通过 后 , 单 击 “ 保 存 ” 按 钮 ,弹出 提 
示 框 。 


5.4.2 分 析 及 实现 
再 次 输入 新 密码 : | 再 次 输入 新 密码 
(1) 从 官网 下 载 ExtJS 包 extjs5, 这 里 采用 的 是 


5.0 版 本 。 | 
下 载 地 址 : http://extjs. org. cn/ 5-9 ”ExtJS 表单 窗口 
(2) 解压 ExtJS 包 , 找 到 ext-all. js 基础 包 (\ext- 
5. 0. 0\build) 和 ext-all-debug. js 基础 包 。 后 面 的 基础 包 开 发 的 时 候 使 用 ,报错 会 详细 些 
(\ext-5. 0. 0\build) 。 再 选 一 个 合适 的 主题 ,这 里 使 用 了 crisp, 找 到 ext-theme-crisp-all. css 
和 images 文件 (\packages\ext-theme-crisp\build\resources)。 
(3) 新 建 index. html 页 面 并 引用 extrall-debug. js、ext-theme-crisp-all. css。 新 建 
index.js 并 应 用 启动 设置 文件 。 新 建 app 文件 夹 ,用 于 放置 controller 和 view 文件 夹 。 
index. html 的 内 容 如 下 : 



































在 index. html 中 引入 了 ExtJS 的 函数 库 以 及 CSS 样式 表 , 引 入 了 index.js 文件 。 
index. js 的 内 容 如 下 : 





4 


(4) 创建 视图 、 控 制 器 。 在 view 文件 夹 下 添加 视图 MyViewport js, 以 下 代码 在 视图 
里 面 加 了 一 个 简单 的 表单 。 





在 controller 文 件 夹 下 添加 控制 器 MyController. js。 程 序 代码 都 可 以 写 在 控制 器 里 
面 ,用 得 最 多 的 就 是 监听 控件 事件 。 对 表单 中 的 “保存 ”按钮 要 监听 单 击 事件 。 


到 这 里 程序 已 经 可 以 运行 了 。 运 行 index. html, 出现 如 图 5-10 所 示 的 窗口 。 
如 果 文 本 框 中 没有 输入 数据 ,会 显示 提示 信息 ,如 图 5-11 所 示 。 
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用 户 修改 密码 Ex JS Trial 
原 密码 : [ 原 记 码 
新 密码 - | 新宇 如 





再 次 输入 新 密码 -| 再 次 输入 新 室友 | 





用 户 修改 密码 


原 密码 
新 密码 
再 次 输入 新 密码 


























5-10 index 页 面 的 内 容 
Ext JS Trial 
原 宕 码 
LE 该 给 入 项 为 必 箱 项 
再 次 输入 新 密码 
5-11 验证 窗口 


所 有 文本 框 都 输入 数据 后 , 单 击 “ 保 存 ” 按 钮 ,弹出 确认 窗口 ,如 图 5-12 所 示 。 


本 章 '| 


本 章 了 


` 结 





信息 提示 Ex JS Trial @ 
已 保存 
图 5-12 确认 窗口 


E 要 介绍 了 JavaScript 的 面向 对 象 编程 ,JavaScript 是 面向 对 象 的 语言 ,但 是 不 使 


用 类 ,可 直接 定义 对 象 ,并 使 用 对 象 的 方法 和 属性 ,另外 ,JavaScript 也 有 丰富 的 内 置 对 象 ， 
包括 数组 、 字 符 串 \ 日 期 等 对 象 ,这 些 对 象 提 供 了 丰富 的 属性 和 方法 .能 快速 地 实现 相应 的 需 
求 。 本 章 还 介绍 了 常用 的 JavaScript 框架 ,包括 Prototype、YUI、 ExtJS、jQuery、Dojo 及 
MooTools, 最 后 用 了 一 种 框架 演示 了 框架 的 使 用 方法 。 
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6.1 jQuery 简介 


随 着 Web 2.0 的 兴起 ,JavaScript 脚本 语言 越 来 越 受到 Web 前 端 开 发 者 的 青睐 。 各 种 
JavaScript 框架 也 莫 勃 发 展 起 来 。 从 早期 的 面向 对 象 框架 Prototype、Dojo 到 2006 年 的 
jQuery, 再 到 2007 年 的 ExtJS, 互 联网 正在 掀起 一 场 JavaScript 风暴 。jQuery 以 其 “ 写 得 
少 , 做 得 多 ”的 独特 风格 ,受到 越 来 越 多 前 端 开发 爱好 者 的 追捧 。 

jQuery 由 John Resig、Brandon Aaron 和 Jorn Zaefferer 创建 , 它 是 JavaScript 的 一 个 
类 库 , 是 继 Prototype 之 后 又 一 个 优秀 的 JavaScript 库 , 是 一 个 由 John Resig 创建 于 2006 年 
1 月 的 开源 项 目 。 现 在 的 jQuery 团队 主要 包括 核心 库 、UI 和 插件 等 开发 人 员 以 及 推广 和 
网 站 设计 维护 人 员 。jQuery 凭借 简洁 的 语法 和 路 平台 的 兼容 性 , 极 大 地 简化 了 JavaScript 
开发 人 员 遍 历 HTML 文档 .操作 DOM.、 处 理事 件 .执行 动画 和 开发 ajax 的 操作 。 其 独特 而 
又 优雅 的 代码 风格 改变 了 JavaScript 程序 员 的 设计 思路 和 编写 程序 的 方式 。 总 之 ,无 论 是 
网 页 设计 师 、 后 台 开 发 者 .业余 爱好 者 还 是 项 目 管理 者 ,也 无 论 是 JavaScript 初学 者 还 是 
JavaScript 高 手 , 都 有 足够 的 理由 去 学 习 jQuery。 其 优势 体现 为 : 

jQuery 强调 的 理念 是 “ 写 得 少 ,做 得 多 "。jQuery 独特 的 选择 器 、 链 式 的 DOM 操作 、 事 
件 处 理 机 制 和 封装 完善 的 ajax 都 是 其 他 JavaScript 库 望 尘 莫 及 的 。 





6.2 jQuery 的 基本 功能 


6.2.1 引用 jQuery 类 库 


jQuery 提供 了 很 多 JavaScript 类 库 , 这 些 类 库 中 包含 大 量 的 应 用 程序 编程 接口 
(application programming interface, API)。 要 使 用 类 库 中 的 API, 不 需要 像 传 统 软 件 一 样 
安装 ,只 需 把 下 载 的 jQuery.js 放 到 网 站 上 的 一 个 公共 的 位 置 。 当 要 在 某 个 页 面 上 使 用 
jQuery 时 ,只 需要 在 相关 的 HTML 文档 中 引入 该 库 文件 即 可 。 

在 实际 项 目 中 ,读者 可 以 根据 实际 需要 调整 jQuery 的 库 路 径 。 如 jQuery. html 文件 中 
需要 引用 jQuery 库 文件 ,就 在 该 文档 的 天 head 之 一 /head> 标 签 中 添加 下 面 的 代码 即 可 。 

<head> 


<script src="Scripts/jQuery.min.js" type="text/javascript"></script> 
</head> 


第 6 章 jQuery 编程 

jQuery 库 文件 版 本 自发 布 以 来 .已 更 新 到 当前 的 3. 0 版 本 ,jQuery 2. 0 以 上 版 本 不 再 

支持 IE 6/7/8, 本 书 的 案例 如 果 没 有 特殊 说 明 , 则 默认 采用 jQuery 1. 10. 2 版 本 ,引用 文件 
时 使 用 该 版 本 的 压缩 版 文件 jQuery. min. js。 


6.2.2 第 一 个 jQuery 程序 





在 jQuery 程序 中 使 用 $ 符号 代替 jQuery, 这 是 jQuery 的 一 个 简写 形式 ,例如 守 ("# 
head") 和 jQuery("#head") 是 等 价 的 ,如 果 没 有 特殊 说 明 , 程 序 中 的 $ 符号 都 是 jQuery 的 
一 个 简写 形式 。 

第 一 个 jQuery 程序 的 代码 如 例 6-1 所 示 。 

【 例 6-1】 第 一 个 jQuery 程序 。 





程序 的 运行 结果 如 图 6-1 所 示 。 


站 Hello jQuery ! 


图 6-1 程序 的 输出 结果 
以 上 程序 中 的 如 下 代码 。 


这 段 代码 的 作用 类 似 于 传统 JavaScript 中 的 window. onload 事件 ,不 过 与 window. 
onload 还 是 有 些 区 别 。 表 6-1 对 它们 进行 了 简单 对 比 。 
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表 6-1 window. onload 与 $ (document). ready() 的 对 比 
对 比 选项 window. onload $ (document). ready(); 
执行 时 机 必须 等 待 网 页 中 所 有 内 容 加 载 完 毕 后 (包含 | 网 页 中 所 有 DOM 结构 绘制 完毕 后 就 执行 ， 
图 片 ) 才 能 执行 DOM 元 素 关 联 的 东西 可 能 并 没有 加 载 完 
了 时 编写 多 个 。 Lb 
丰 虹 由 时 编写 多 个 。 以下 代 开 无 法 正确 | 能 同时 编写 多 个 。 以 下 代码 可 以 正确 执行， 
ei $ (document). ready(function() { 
window. onload= function( ) { 网 和 
品 大 alert("Hello World!"); 
alert(" Hello") yy 
写 个 ) 了 
编写 个 数 | ) $ (document). ready({function(){ 
window. onload= function(){ , i 
请 和 | alert(" HellojQuery!"); 
alert( "jQuery") js 
和 
行 以 序 , 结 
执行 以 上 程序 ,结果 只 会 输出 jQuery 村 全 人 则 仆人 有 生生 
$ (document). ready(Cfunction(){ 
六 
简化 写法 | 无 可 以 简写 成 : 





6.2.3 jQuery 选择 器 

当 要 操作 HTML 页 面 上 的 元 素 时 , 需 快速 定位 到 页 面 上 的 目标 元 素 , 在 JavaScript 中 
一 般 使 用 document. getElementById 获得 这 些 元 素 。 但 要 灵活 获取 HTML 页 面 中 的 元 
素 ,使 用 JavaScript 就 显得 很 麻烦 ,如 果 使 用 jQuery 选择 器 ,操作 过 程 就 会 更 简单 。 

jQuery 中 的 选择 器 完全 继承 了 CSS 样式 的 风格 。 利 用 jQuery 选择 器 ,可 以 非常 便捷 
和 快速 地 找 出 特定 的 DOM 元 素 , 然 后 为 它们 添加 相应 的 行为 ,而 无 须 担 心 浏览 器 是 否 支 持 
这 一 选择 器 。 学 会 使 用 选择 器 是 学 习 jQuery 的 基础 ,jQuery 的 行为 规则 都 必须 在 获取 到 
元 素 后 才能 生效 。 在 jQuery 中 ,有 多 种 方法 可 以 快速 获取 元 素 , 元 素 选 择 器 和 属性 选择 器 
允许 开发 者 通过 标签 名 、 属 性 名 或 内 容 对 HTML 元 素 进行 选择 ,选择 后 可 对 HTML 元 素 
组 或 单个 元 素 进 行 操作 。 


下 面 来 看 一 个 简单 的 例子 ,代码 如 例 6-2 所 示 。 


【 例 6-2】 JavaScript 执行 事件 。 


<script type= "text/javascript"> 
function test(){ 


} 


alert ("Hello JavaScript")7 


</script> 
<p onclick= "test ();"> 单 击 我 </p> 








$ (function() { 


}) 


本 段 代 码 的 作用 是 为 二 p 二 元 素 设置 一 个 onClick 事件 , 当 单 击 此 元 素 时 ,会 弹出 一 个 
对 话 框 。 像 上 面 这 样 把 JavaScript 代码 和 HTML 代码 混杂 在 一 起 的 做 法 同样 也 不 妥 ,因为 
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这 样 并 没有 将 网 页 内 容 和 行为 分 离 。 如 果 使 用 如 下 的 代码 ,效果 就 明显 不 一 样 ,并 实现 了 
JavaScript 代码 和 HTML 代码 的 分 离 。 
【 例 6-3】 jQuery 执行 事件 。 





<p class="testClass">jQuery Test< /p> 
<script type="text/javascript"> 
// 给 class 为 testclass 的 元 素 添加 行为 
$(".testCclass") .click (function(){ 
alert ("Hello jQuery!"); 
bE 
</script> 


下 面 将 CSS 的 写法 和 jQuery 的 写法 进行 比较 。 
CSS 获取 到 元 素 的 代码 如 下 : 
.testClass { 


.…// 给 testclass 类 中 的 元 素 添加 样式 
1 


jQuery 获取 到 元 素 的 代码 如 下 : 


$(".testclass"){ 
.…// 给 testclass 类 中 的 元 素 添加 行为 
} 


择 器 找到 元 素 后 是 添加 样式 ,而 jQuery 选择 器 找到 元 素 后 是 添加 行为 。 需 要 特别 说 明 的 
是 ,jQuery 中 涉及 操作 CSS 样式 部 分 比 单纯 的 CSS 功能 更 为 强大 ,并 且 拥 有 跨 浏 览 器 的 兼 

jQuery 选择 器 分 为 基本 选择 器 .层次 选择 器 ,过滤 选 择 器 和 表单 选择 器 。 

1. 基本 选择 器 

基本 选择 器 是 jQuery 中 最 常用 的 选择 器 ,也 是 最 简单 的 选择 器 , 它 通过 元 素 id class 
和 标签 名 等 来 查找 DOM 元 素 。 在 网 页 中 ,每 个 id 名 称 只 能 使 用 一 次 ,class 允许 重复 使 用 。 
基本 选择 器 的 介绍 说 明 如 表 6-2 所 示 。 


表 6-2 基本 选择 器 的 介绍 说 阴 




















选 择 器 描 述 返 回 示 例 
#id 站 得 匹配 一 | 单个 元 素 | $("#test") 用 于 选取 id 为 test 的 元 素 
根据 给 定 的 类 名 匹配 $(".test") 用 于 选取 所 有 class 为 test 
.class 2 集合 元 素 
元 素 的 元 素 
给 定 的 元 
einent a 集合 元 素 ”| $ ("p") 用 于 选取 所 有 的 一 pb 人 > 元 素 
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续 表 
选 择 器 描 述 返 回 示 例 
¥ 匹配 所 有 元 素 集合 元 素 $ ("x* ") 用 于 选取 所 有 的 元 素 
将 每 一 个 选择 器 匹配 $ ("div,span,p. myClass") 用 于 选取 所 
selectorl ,selector2,… ”| 到 的 元 素 合 并 后 再 一 集合 元 素 有 二 div 二 .一 span 二 和 拥有 class 为 
起 返回 myClass 的 一 p 标 签 的 一 组 元 素 


【 例 6-4】 id 选择 器 的 使 用 。 
以 下 代码 将 id 一 "one" 的 元 素 背景 色 设置 为 黑色 。 


<div id="one" style="color:#fff;"> 修 改 我 的 背景 色 < /div> 
<div id="two"> 不 修改 我 的 背景 色 < /div> 
<script type= "text/javascript"> 
$(document) .ready (function () { 
$('#one') .css('background', '#000°'); 
]) 2 
</script> 


程序 的 运行 效果 如 图 6-2 所 示 。 





不 修改 我 的 背景 色 
图 6-2 id 选择 器 的 使 用 
2. 层次 选择 器 
层次 选择 器 可 以 通过 DOM 元 素 之 间 的 层次 关系 来 获取 特定 元 素 , 例 如 后 代 元 素 、 子 元 
素 、 相 邻 元 素 和 兄弟 元 素 等 。 层 次 选择 器 的 说 明 如 表 6-3 所 示 。 
表 6-3 层次 选择 器 的 说 明 


























选 择 器 描 述 返 回 示 例 
选取 ancestor 元 素 里 Wi ne 
ndeator Qedcendaniny | 的 所 有 descaiilaitk 后 | 染 各 元 夫 | 《vapan) 用 于 效 取 <dip 之 里 的 
代 元 素 ) 所 有 的 一 span 二 元 素 
a 选取 parent 元 素 下 的 a $("div 二 span") 用 于 选取 一 div 二 元 素 
$ ("parent>child") child( 子 ) 元 素 集合 元 素 下 元 素 名 是 一 span 的 子 元 素 
pi 选取 紧 接 在 prev 元 素 a $(". one 十 div") 用 于 选取 class 为 one 
$ ("prevtnext") 后 的 next 元 素 集合 元 素 的 下 一 个 过 div 之 元 素 
$ Crprevsillings") 选取 prev 元 素 之 后 的 集合 元 素 $("#Ftwo~div") 用 于 选取 id 为 two 
人 所 有 siblings 元 素 中 下 如 | 的 元 素 后 面 的 所 有 二 div 二 兄弟 元 素 


【 例 6-5】 层次 选择 器 的 使 用 。 


<div style="border:lpx solid #000;"> 
<span>123</span> 


180 


第 6 章 jQuery 编程 





<p> 
<span> 456< /span> 
</p> 
</div> 
<script type= "text/javascript"> 
$ (document) .ready (function () { 
// 选 取 div 下 的 第 一 代 span 元 素 , 并 将 字体 大 小 改 为 16px 
$('div>span').css('color', '#FF0000°'); 
]) 7 
</script> 


以 上 面 代码 中 ,只 有 第 一 个 span 的 字体 会 变 成 16px, 第 二 个 span 不 属于 div 的 一 代 子 
元 素 , 字 体 大 小 保持 不 变 。 程 序 的 运行 效果 如 图 6-3 所 示 。 

3. 过 滤 选择 器 123 

过 滤 选 择 器 主要 是 通过 特定 的 过 滤 规 则 来 筛选 出 所 需 的 “|8s6 
DOM 元 素 。 过 滤 规 则 与 CSS 的 伪 类 选择 器 语法 相同 , 即 选择 
器 都 以 一 个 冒号 (:) 开 头 。 按 照 不 同 的 过 滤 规 则 ,过 滤 选 择 器 图 6-3 层次 选择 器 的 使 用 
可 以 分 为 基本 过 滤 、 内 容 过 滤 、 可 见 性 过 滤 、 属 性 过 滤 、 子 元 素 
过 滤 和 表单 对 象 属性 过 滤 选 择 器 。 

(1) 基本 过 滤 选 择 器 。 基 本 过 滤 选 择 器 的 使 用 频率 很 高 ,包括 的 内 容 说 明 详 见 表 6-4 
所 示 。 

















表 6-4 基本 过 滤 选 择 器 的 说 明 









































选择 器 描 述 返 回 示 例 

本 NC 二 $("div:first") 用 于 选取 所 有 二 div 过 元素 中 
:first 选取 第 一 个 元 素 单个 元 素 | 的 第 一 个 一 div 二 元 素 

_ $("div:last") 用 于 选取 所 有 一 div 二 元 素 中 的 
:last 选取 最 后 一 个 元 素 单个 元 素 最 后 一 个 <div> 元 素 
7 去 除 所 有 与 给 定 选择 器 匹 集合 元 素 $("input:not(. myClass)") 用 于 选取 class 不 
- 配 的 元 素 加 是 myClass 的 二 input 二 元 素 
Re 选取 索引 是 偶数 的 所 有 元 | 集 台 元 素 | $C input: even") 用 于 选取 索引 是 偶数 的 
素 , 索 引 从 0 开始 二 一 input 二 元 素 
.odd 选取 索引 是 奇数 的 所 有 元 集合 元 素 $("input:odd") 用 于 选取 索引 是 奇数 的 
素 ,索引 从 0 开始 至 二 input 记 元 素 

. 选取 索引 等 于 index 的 元 $ ("input: eq(1)") 用 于 选取 索引 等 于 1 的 

:eqlindex) | 素 (index 从 o 开始 ) 和 个 于 这 | -<input> 元 过 
de 选取 索引 大 于 index 的 元 集合 元 素 $("input: gt(1)") 用 于 选取 索引 大 于 1 的 
多 素 (index 从 0 开始 ) 呈 克 人 | 一 input> 元 素 ( 注 : 大 于 1 并 不 包括 1) 
ny 选取 索引 小 于 index 的 元 集合 元 素 $("input:lt(1)") 用 于 选取 索引 小 于 1 的 
素 (index 从 0 开始 ) 轿 二 input 记 元 素 ( 注 :; 小 于 1 并 不 包括 1) 
:header 选取 所 有 的 标题 元 素 , 例 | 集合 元 素 | $5": header") 用 于 选取 网 页 中 所 有 的 
: 如 hl、h2、h3 等 Cea ee ™ Se 
do 选取 当前 正在 执行 动画 的 集合 元 素 $("div:animated") 用 于 选取 正在 执行 动画 的 
2 所 有 元 素 ”| <div> 元 素 
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(2) 内 容 过 滤 选 择 器 。 内 容 过 滤 选 择 器 的 过 滤 规 则 主要 体现 在 它 所 包含 的 子 元 素 或 文 
本 内 容 上 。 内 容 过 滤 选 择 器 的 说 明 如 表 6-5 所 示 。 


表 6-5 内容 过 滤 选 择 器 的 说 明 











选择 器 描 述 返 回 示 例 
,contains(text) | 选取 合 有 文本 内 容 为 text | 集合 元 素 | $C div:contains(' 我 9") 用 于 选取 合 有 文本 
的 元 素 和 “我 "的 一 div 过 元 素 
sa 选取 不 包含 子 元 素 或 者 文 集合 元 素 $("div:empty") 用 于 选取 不 包含 子 元 素 ( 文 
WePY 本 的 空 元 素 全 下 菇 | 本 元 素 ) 的 一 div> 空 元 素 
,has(selector) ”| 选取 含有 选择 器 所 匹配 的 集合 元 素 $("div:has(p)") 用 于 选取 含有 一 p 二 元 素 的 
Se 元 素 的 元 素 村 一 div 过 元素 





i 选取 含有 子 元 素 或 者 文本 集合 元 素 $("div:parent") 用 于 选取 拥有 子 元 素 (包含 
下 的 元 素 入 文本 元 素 ) 的 一 div 二 元 素 











(3) 可 见 性 过 滤 选 择 器 。 可 见 性 过 滤 选 择 器 是 根据 元 素 的 可 见 和 不 可 见 状 态 来 选择 相 
应 的 元 素 。 可 见 性 过 滤 选 择 器 的 说 明 如 表 6-6 所 示 。 
表 6-6 可 见 性 过 滤 选 择 器 的 说 明 








选择 器 描 述 返 回 示 例 
$(":hidden") 用 于 选取 所 有 不 可 见 的 元 素 。 包 括 二 input type 一 
选取 所 有 不 "hidden" /全 ,二 div style 三 "display: none;" 二 和 一 div style 一 


:hi 器 公开 
:hidden | 可 见 的 元 素 | 集合 元 素 ,isipility;hidden;" 之 等 元 素 。 如 果 只 想 选取 二 input 之 元 素 ,可 
以 使 用 $ ("input:hidden") 





| 加 集合 元 素 | $ ("div:visible") 用 于 选取 所 有 可 见 的 二 div 二 元 素 


:visible 














(4) 属性 过 滤 选 择 器 。 属 性 过 滤 选 择 器 的 过 滤 规 则 是 通过 元 素 的 属性 来 获取 相应 的 元 
素 。 属 性 过 滤 选 择 器 的 说 明 如 表 6-7 所 示 。 
表 6-7 属性 过 滤 选 择 器 的 说 明 
选 择 器 描 述 返回 示 例 


attribute] 选取 拥有 此 属性 的 元 素 合 元 素 人 a 








选取 属性 的 值 为 value 的 集合 元 素 $$ ("divLtitle 二 testj") 用 于 选取 属性 
元 素 ” | file 为 test 的 div 二 元 素 


[attribute= value] 





$ ("div[title! 二 test]") 用 于 选取 属 
选取 属性 的 值 不 等 于 集合 元 素 性 title 不 等 于 test 的 二 div 二 元 素 








[attribute! = value] value 的 元 素 Ct (注意 : 没有 属性 title 的 一 div 二 元 素 
也 会 被 选取 ) 

a 选取 属性 的 值 以 value 开 Rs $("div[title^ 一 test]") 用 于 选取 属 

[attribute 一 value] 始 的 元 素 集合 元 素 性 title 以 test 开始 的 二 div 二 元 素 
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续 表 
选 择 器 描 述 返 回 示 例 

. en 选取 属性 的 值 以 value 结 $ ("div[title$ =test]") 用 于 选取 属 

[attribule $ = value] 束 的 元 素 集合 元 素 性 title 以 test 结束 的 <div 之 元 素 
ee 选取 属性 的 值 含有 value 集合 元 素 $("div[title * 一 test]") 用 于 选取 属 

人 的 元 素 | 性 tide 含 有 test 的 二 div 二 元 素 
用 属性 选择 器 合并 成 一 个 0 a 

i 了 $("div[id] [title$ = 'test]J") 用 于 
[selectorl],[selector2], | 复合 属性 选择 器 ,满足 多 集合 元 素 | 选取 拥有 属性 id, 并 且 属 性 title 以 





个 条 件 。 每 选择 一 次 , 缩 
小 一 次 范围 











test 结束 的 二 div 二 元 素 


(5) 子 元 素 过 滤 选 择 器 。 子 元 素 过 滤 选 择 器 的 过 滤 规 则 相对 于 其 他 的 选择 器 稍微 有 些 
复杂 ,不 过 没关系 ,只 要 将 元 素 的 父 元 素 和 子 元 素 区 分 清楚 ,那么 使 用 起 来 也 非常 简单 。 另 
外 还 要 注意 它 与 普通 的 过 滤 选 择 器 的 区 别 。 

子 元 素 过 滤 选 择 器 的 说 明 如 表 6-8 所 示 。 


表 6-8 子 元 素 过 滤 选 择 器 














选 择 器 描述 返 回 示 例 
“:eq(index)" 只 匹配 一 个 元 素 , 而 *: 
,nth-ehild indexy/eveny/| 选择 每 个 父 元 素 下 的 第 nth-child" 将 为 每 一 个 父 元 素 匹 配子 
,ddyeouatiomn) ”index 个 子 元 素 或 者 奇偶 | 集合 元 素 | 元 素 , 并 且 *: nth-child (index)” 的 
SEIN 元 素 (index 从 1 算 起 ) index 是 从 1 开始 的 ,而 * :eq(index)” 
是 从 0 算 起 的 
“:first” 只 返回 单个 元 素 ,“: first- 
全 child" 选 择 符 将 为 每 个 父 元 素 匹 配 第 
sfirst-child se 元 素 的 第 1 个 | 集合 元 素 | 1 个子 元 素 。 例 如 $C"ul li first- 
child") ;用 于 选取 每 个 二 dl 二 中 的 第 
1 个 一 li 这 元 素 
同样 ,“:last" 只 返回 单个 元 素 ,而 *: 
， we lasrchild" 选 择 符 将 为 每 个 父 元 素 匹 
slast-child 选取 各 个 僚 殉 素 的 最 局 | 集合 元 素 | 配 最 后 一 个 子 元 素 。 例 如 SG"ul li 
rap, last-child" ) 选 择 每 个 二 ul 二 中 的 最 后 
一 个 二 li> 元 素 
如 果 某 个 元 素 是 其 父 元 素 
的 唯一 的 子 元 素 ,那么 将 et 
,alyelild 会 被 匹配 。 如 果 父 元 素 中 | 集合 元 素 | (Hsonly-ehild) 在 过 二 申 选 





含有 其 他 元 素 , 则 不 会 被 
匹配 








取 作为 唯一 子 元 素 的 二 li 二 元 素 


(6) 表单 对 象 属性 过 滤 选 择 器 。 此 选择 器 主要 是 对 所 选择 的 表单 元 素 进行 过 滤 , 例 如 
选择 被 选中 的 下 拉 框 、 多 选 框 等 。 表 单 对 象 属性 过 滤 选 择 器 的 说 明 如 表 6-9 所 示 。 
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表 6-9 表单 对 象 属性 过 滤 选 择 器 的 说 明 

















选择 器 描 述 返 回 示 例 
i 二 $("# forml: enabled") 用 于 选取 id 为 

:enabled ”| 选取 所 有 可 用 元 素 集合 元 素 。 | gol 曾 雪 量具 的 房 才 而 用 元 家 

2 2 $("# form2:disabled") 用 于 选取 id 为 
:disat 选 癌 本 合 oT 
:disabled | 选取 所 有 不 可 用 元 素 集合 元 素 | formz 的 表单 内 的 所 有 不 可 用 元 素 

汉 选取 所 有 被 选中 的 元 素 集合 元 素 $ ("input:checked") 用 于 选取 所 有 被 选中 
EE ( 单 选 框 . 复 选 框 ) 已 下 的 过 input 之 元素 

lees 选取 所 有 被 选中 的 选项 | 《集合 元 素 | $select:selected") 用 于 选取 所 有 被 选中 
| 元 素 (下 拉 列 表 ) 轴 扩 的 选项 元 素 











【 例 6-6】 过 滤 选 择 器 的 使 用 。 


<table width="200" cellpadding="0" cellspacing="0" 
style="border:1px solid #000;"> 
<tbody> 
<tr><td>A</td></tr> 
<tr><td>B</td></tr> 
<tr><td>c</td></tr> 
<tr><td>D</td></tr> 
</tbody> 
</table> 
<script type= "text/javascript"> 
$(document) .ready (function () { 
// 偶 数 行 颜色 
$('tr:even') .css('background', '#EEE'); 
// 奇 数 行 颜色 
$('tr:odd') .css('background', '#DADADA'); 
]) 7 
</script> 


以 上 代码 可 使 用 户 设置 表格 中 偶数 和 奇数 行 的 背景 颜色 ,索引 从 0 开始 ,even 表示 偶 
数 ,odd 表示 奇数 ,程序 的 运行 效果 如 图 6-4 所 示 。 


4. 表单 选择 器 
为 了 使 用 户 能 够 更 加 灵活 地 操作 表单 ,jQuery 中 专门 加 入 


了 表单 选择 器 ,能 极其 方便 地 获取 到 表单 的 某 个 或 某 类 型 的 元 i 
素 ,示例 如 表 6-10 所 示 。 到 6-4 过 滤 选 择 器 的 使 用 














表 6-10 ”表单 对 象 属性 过 滤 示 例 
选择 器 描 述 返 回 示 例 
选取 所 有 的 二 input 二 、 





$(":input") 用 于 选取 所 有 的 二 input 二 、 














区 < > 一 select 二 合 元 > 
:input elect 二 和 | 集合 元 素 一 textarea 二 、 一 select 二 和 一 button 二 元 素 
:text 选取 所 有 的 单行 文本 框 集合 元 素 $(":text") 用 于 选取 所 有 的 单行 文本 框 
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续 表 
选择 器 描 述 返 回 示 例 
:password | 选取 所 有 的 密码 框 $ ("password") 用 于 选取 所 有 的 密码 框 
:radio 选取 所 有 的 单 选 框 $(":radio") 用 于 选取 所 有 的 单 选 杠 








:checkbox | 选取 所 有 的 多 选 框 


$(":checkbox") 用 于 选取 所 有 的 复 选 杠 





:submit 选取 所 有 的 “提交 ”按钮 





:submit") 用 于 选取 所 有 的 “提交 ”按钮 





:image 选取 所 有 的 图 像 按钮 





nage") 用 于 选取 所 有 的 图 像 按钮 

















:reset 选取 所 有 的 “ 重 置 "按钮 





:reset") 用 于 选取 所 有 的 “ 重 置 "按钮 





:butt 


on 选取 所 有 的 按钮 $(":button") 用 于 选取 所 有 的 按钮 





:file 


选取 所 有 的 上 传 域 $(":file") 用 于 选取 所 有 的 上 传 域 





:hidd 


地 | 让 | Hild Hl| dil Hil Hil 


洲 | 潍 | 济 | 洲 | 济 | 浇 | 济 | 济 | 洲 
Ea 














浪 | 浪 | 浪 | 浪 | 浪 | 浪 | 浪 | 流 | 浪 
Dp| 区 | 区 | 区区 | 区 | 中 | 东 


en 选取 所 有 的 不 可 见 元 素 :hidden") 用 于 选取 所 有 的 不 可 见 元 素 


【 例 6-7】 表单 选择 器 的 使 用 。 


<fieldset style= "width: 300px;"> 
<legend> 账 户 登录 </legend> 
<div> 
<label> 用 户 名 :</label><input type="text"/> 
</div> 
<br> 
<div> 
<label> 密 gnbsp; &nbsp; snbsp; snbsp; 码 :</label><input type="password"/> 
</div> 
</fieldset> 
<script type= "text/javascript"> 
$(document) .ready (function() { 
$('input:text') .css('border', '3px solid #000°'); 
$('input:password') .css('border', 'lpx solid #000'); 
1); 
</script> 


以 上 代码 通过 表单 选择 器 的 $ Cinput:;text) 方 法 设置 用 户 名 文本 框 的 边框 线 为 3px, 使 


用 表 六 





选择 器 的 $$ (input:password") 方 法 设置 密码 文本 框 的 边框 线 为 1px, 程 序 的 运行 效 
果 如 图 6-5 所 示 。 
账户 登录 - 
RPS:C |] 


6.2. 


pl 





图 6-5 表单 选择 器 的 使 用 


4 jQuery 事件 方法 
不 件 方法 会 触发 匹配 元 素 的 事件 ,或 将 函数 绑 定 到 所 有 匹配 元 素 的 某 个 事件 ,jQuery 











提供 了 丰富 多 样 的 事件 处 理 方法 。 
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1. 载 入 事件 ready(fun) 

ready(fun) 在 DOM 载 和 就绪 并 可 以 查询 及 操纵 时 绑 定 一 个 要 执行 的 函数 ,这 是 事件 
模块 中 最 重要 的 一 个 函数 ,因为 它 可 以 极 大 地 提高 Web 应 用 程序 的 响应 速度 。 简 单 地 说 ， 
这 个 方法 纯粹 是 对 向 window. load 注册 事件 的 替代 方法 。 通 过 使 用 这 个 方法 ,可 以 在 
DOM 载 人 就 绪 且 能 够 读 取 并 操纵 时 立即 调用 用 户 所 绑 定 的 函数 ,而 大 多 数 的 JavaScript 函 
数 都 需要 在 那 一 刻 执行 。 

该 函数 有 一 个 参数 fun, 它 会 传递 到 这 个 ready 事件 处 理 函 数 中 ,可 以 给 这 个 参数 任意 
起 一 个 名 字 , 并 因此 可 以 不 再 担心 命名 冲突 而 放心 地 使 用 $ 作为 别名 。 

请 确保 在 元 素 的 onload 事件 中 没有 注册 函数 ,否则 不 会 触发 $ (document). ready() 事 
件 。 可 以 在 同一 个 页 面 中 无 限 次 地 使 用 $ (document). ready() 事 件 。 其 中 注册 的 函数 会 按 
照 (代码 中 的 ) 先 后 顺序 依次 执行 ,在 DOM 加 载 完成 时 运行 的 代码 可 以 这 样 写 : 





$ (document) .ready (function(){ 
// 代 码 逻 辑 … 
]) 7 


使 用 $ (document). ready() 的 简写 ,同时 内 部 的 jQuery 代码 依然 使 用 $ 作 为 别名 ,而 
不 管 全 局 的 $ 为 何 值 。 


jQuery (function($) { 


// 这 里 继续 使 用 $ 作 为 别名 …… 
1D); 


2. 事件 处 理 

(1) bind 事件 。bind(type,[data]j,fn) 为 每 个 匹配 元 素 的 特定 事件 绑 定 事件 处 理 函 数 。 
bind() 方 法 是 用 于 往 文档 上 附加 行为 的 主要 方式 。 所 有 JavaScript 事件 对 象 ,比如 focus、 
mouseover 和 resize, 都 是 可 以 作为 type 参数 传递 进来 的 。 

jQuery 还 提供 了 一 些 绑 定 这 些 标 准 事件 类 型 的 简单 方式 .比如 click() 用 于 简化 bind 
(Celick) 。 这 些 事件 还 包括 : blur ,focus .focusin ,focusout load ,resize、scroll .unload click、 
dblclick 、 mousedown、 mouseup 、 mousemove、 mouseover、 mouseout 、 mouseenter、 
mouseleave change select submit keydown keypress ,keyup,error, 

任何 作为 type 参数 的 字符 串 都 是 合法 的 ,如 果 一 个 字符 串 不 是 原生 的 JavaScript 事件 
名 ,那么 这 个 事件 处 理 函 数 会 绑 定 到 一 个 自 定 义 事件 上 。 这 些 自 定义 事件 绝对 不 会 由 浏览 
器 触发 ,但 可 以 通过 使 用 trigger() 或 者 triggerHandler() 在 其 他 代码 中 手动 触发 。 

当 一 个 事件 传 到 一 个 元 素 上 ,所 有 绑 定 在 上 面 的 针对 哪个 事件 的 处 理 函 数 都 会 触发 。 
如 果 注 册 了 多 个 事件 处 理 函 数 ,总 是 按照 绑 定 的 顺序 依次 触发 。 当 所 有 绑 定 的 事件 处 理 函 
数 执行 完毕 后 ,事件 继续 沿 着 普通 的 事件 冒 泡 途径 上 浮 。 

事件 处 理 函 数 中 的 fn 参数 接受 一 个 回调 函数 ,就 像 先前 展示 的 那样 。 在 这 个 事件 处 理 
函数 内 部 ,this 指向 这 个 函数 绑 定 的 DOM 元 素 。 如 果 要 让 这 个 元 素 变 成 jQuery 对 象 来 使 
用 jQuery 的 方法 ,可 以 把 这 个 对 象 传人 $ () 并 重新 封装 。 
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【 例 6-8】 事件 的 使 用 。 





以 上 代码 在 ready() 加 载 事件 中 给 button 对 象 绑 定 了 click 事件 ,事件 执行 后 将 隐藏 所 
有 的 一 p 过 元素, 运行 效果 如 图 6-6 和 图 6-7 所 示 。 


This is a heading 
This is a paragraph 
后 This is a heading 
[Eeel 
图 6-6 事件 执行 之 前 6-7 事件 执行 之 后 


(2) unbind 事件 。unbind([Ltypej,[fn]) 为 bind() 函 数 的 反 向 操作 ,从 每 一 个 匹配 的 元 
素 中 删除 绑 定 的 事件 。 如 果 没 有 参数 , 则 删除 所 有 绑 定 的 事件 。 例 如 : 

$("p"). unbind();// 把 所 有 段落 的 所 有 事件 取消 绑 定 。 

$("p"). unbind("click"); // 将 段落 的 click 事件 取消 绑 定 。 

(3) one 事件 。one(type,[data],fn) 用 于 为 每 个 匹配 元 素 的 特定 事件 绑 定 一 个 一 次 性 
事件 处 理 函 数 。 这 个 事件 处 理 函 数 只 会 被 执行 一 次 。 其 他 规则 与 bindO 〇 函数 相同 ,如 下 面 
的 代码 中 在 第 一 次 单 击 的 时 候 ,会 显示 所 有 的 文本 ,后 面 的 执行 将 无 效 。 


(4) trigger 事件 。trigger(type.[data]) 用 于 在 每 一 个 匹配 的 元 素 上 触发 某 类 事件 。 
例如 : 


3. 事件 切换 
(1) hover 事件 。hover(Cover,out) 用 于 模仿 悬 停 事件 的 方法 , 即 鼠 标 光 标 移动 到 一 个 
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对 象 上 面 后 又 移出 这 个 对 象 。 这 是 一 个 自 定义 的 方法 , 它 为 频繁 使 用 的 任务 提供 了 一 种 “ 保 
持 在 其 中 ”的 状态 。 

当 鼠 标 光 标 移动 到 一 个 匹配 的 元 素 上 面 时 .会 触发 指定 的 第 一 个 函数 。 当 鼠标 光标 移 
出 这 个 元 素 时 ,会 触发 指定 的 第 二 个 函数 。 而 且 会 伴随 着 对 鼠标 是 否 仍 然 处 在 特定 元 素 中 
的 检测 (例如 ,处 在 div 中 的 图 像 ) ,如 果 是 , 则 会 继续 保持 " 悬 停 状态 ,而 不 触发 移出 事件 ， 
示例 代码 如 下 : 





(2) toggle 事件 。toggle(fn,fn2,[fn3,fn4,...]) 表 示 每 次 单 击 后 依次 调用 函数 。 如 果 
单 击 了 一 个 匹配 的 元 素 , 则 触发 指定 的 第 一 个 函数 ; 当 再 次 单 击 同一 元 素 时 , 则 和 触发 指定 的 
第 二 个 函数 :如果 有 更 多 函数 , 则 再 次 触发 ,直到 最 后 一 个 。 随 后 的 每 次 单 击 都 重复 对 这 几 
个 函数 的 轮番 调用 。 可 以 使 用 unbind("click") 来 解除 该 事件 的 调用 ,如 例 6-9 中 对 表格 的 
二 td 二 执行 样式 进行 切换 。 

【 例 6-9】 toggle 事件 示例 。 
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4. 其 他 事件 
jQuery 还 提供 丰富 的 其 他 事件 ,如 焦点 事件 、 键 盘 事 件 、 鼠 标 事件 等 , 表 6-11 列举 了 部 
分 常用 事件 。 








表 6-11 常用 事件 
事件 名 称 事件 的 原型 结构 使 用 示例 
$ (document). ready (function(O){ 
聚焦 onfocus([ fn]) $ ("Fname"). focus(); 


)); // 当 页 面 加 载 后 将 id 为 name 的 元 素 设置 为 焦点 
$ ("input[type= text]"). focus(function() { 

失去 焦点 onblur([fn]) this. blur(); 

)); ”// 无 法 使 用 文本 框 


























按 下 键盘 keydown( [fn]) $ (window). keydown( function( event) { 
switch(event. keyCode) { 
按 下 并 松 开 按键 keypress([fn]) // 不 同 的 按键 可 以 做 不 同 的 事情 
松 开 按 甸 keyup(LfnD) )): // 在 页 面 内 对 键盘 按键 做 出 回应 
$ (window). load( 
页 面 加 载 load(fn) function() { alert("Hello!"); 
Ds; 
$ (window). unload ( 
页 面 印 载 unload(Cfn) function() { alert("Hello!"); 
); 
鼠标 单 击 click([fn]) $C"p"). click(function() { $ (this). hide(O) ; }); 





$ ("p"). mouseover ( 
鼠标 上 移 mouseover(Cfn) function() { alert($ (this). html())， 
)); // 输 出 二 p 二 的 HTML 内 容 





$ ("p"). click(function() { $ (this). hideO) ; }); 




















鼠标 移 开 mouseout (fn) // 隐 藏 自己 
鼠标 双击 dbclick([fn]) $ ("p"). dblclick(function() {alert("Hello World!"); }); 
$ ("input[type= text]"). change(function() { 
文本 /索引 的 改变 change(C[fn]) // 这 里 可 以 写 些 验证 代码 
})5 
$ (window). resize(function(){ 
改变 窗 体 大 小 resize alert("Change Window!"); 
}))s 
$ (window). scroll(function() { 
页 面 滚动 条 发 生变 化 scroll /* ...do something... * /} ); 
// 当 页 面 滚动 条 变化 时 执行 的 函数 
$(":text"). select(function() { /* ...do something... 
文本 被 选中 select */} )5 
// 当 文本 框 中 文本 被 选中 时 执行 的 函数 
有 本 攻 i i { 
提交 表单 sbi $ ("form"). submit(function() { 








return false;} ); ”// 阻 止 表单 的 提交 
189 


交互 式 Web 前 端 开 发 实践 





6.2.5 jQuery 动画 


jQuery 提供 了 常用 的 动画 效果 ,减少 了 编程 过 程 中 的 动画 编写 难度 ,开发 者 不 需要 考 
虑 不 同 浏览 器 的 差异 性 ,开发 者 也 可 以 根据 自己 的 要 求 自 定义 动画 。 

1. show()/hide()/toggle() 

显示 (show()) 和 隐藏 (hide()) 方 法 对 于 动画 来 说 是 最 基本 的 效果 , 例 6-10 演示 了 对 段 
落 标记 的 隐藏 和 显示 。 

【 例 6-10】 show()/hide() 使 用 示例 1 。 





show()/hide() 方 法 还 可 以 接收 参数 。 根 据 参 数 的 不 同 , 可 以 达到 显示 不 同 效果 的 目 
的 ,其 语法 如 下 : 


其 中 ,duration 表示 动画 执行 时 间 的 长 短 ,可 以 用 与 速度 有 关 的 字符 串 来 表示 ,包括 
slow、normal、fast, 也 可 以 是 表示 时 间 的 整数 (毫秒 )。callback 是 可 选 的 回调 函数 ,在 动画 
完成 之 后 执行 。 如 例 6-11 中 进行 显示 需要 500 毫秒 ,隐藏 需要 300 毫秒 ,隐藏 结束 或 调用 
回调 函数 ,弹出 消息 “已 隐藏 ”。 

【 例 6-11】 show()/hide() 使 用 示例 2。 








190 


第 6 章 jQuery 编程 








toggle() 方 法 用 于 切换 元 素 的 可 见 状 态 , 如 果 被 选 元 素 可 见 , 则 隐藏 这 些 元 素 ;如 果 被 
选 元 素 隐 藏 , 则 显示 这 些 元 素 。 语 法 如 下 : 





参数 speed .callback 同 show()Vhide() 方 法 中 的 对 应 参数 。 参 数 switch 为 布尔 值 , 规 
定 了 toggle 是 否 隐 藏 或 显示 所 有 被 选 元 素 。 
【 例 6-12】 toggle 使 用 示例 。 





2. fadeIn() 和 fadeOut() 
fadeIn() 和 fadeOut() 用 于 实现 渐 隐 渐 现 的 效果 ,其 语法 与 slow() 和 hide() 完 全 相同 ， 
语法 如 下 : 





【 例 6-13】 fadeIn() 和 fadeOut() 使 用 示例 。 
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3. slideUp() 和 slideDown() 

slideUp() 和 slideDown() 可 以 实现 拉 幕 效果 ,slideUp() 实 现 向 上 拉 幕 ,slideDown 实现 
向 下 降 幕 ,如 例 6-14 所 示 。 

【 例 6-14】 slideUp() 和 slideDown() 使 用 示例 。 





4. 自 定义 动画 

考虑 到 框架 的 通用 性 及 代码 文件 的 大 小 ,jQuery 不 能 涵盖 所 有 的 动画 效果 ,但 它 提 供 
了 animate() 方 法 ,能 够 使 开发 者 自 定 义 动画 ,animate() 方 法 在 执行 时 遵从 动画 队列 的 两 种 
规则 。 

(1) 一 组 元 素 上 的 动画 效果 。 当 在 一 个 animate() 方 法 中 应 用 多 个 属性 时 ,动画 是 同时 
发 生 的 ; 当 以 链 式 的 写法 应 用 动画 方法 时 ,动画 是 按 顺序 依次 发 生 的 。 

(2) 多 组 元 素 上 的 动画 效果 。 默 认 情况 下 ,动画 都 是 同时 发 生 的 。 当 以 回调 的 形式 应 
用 动画 方式 时 ,动画 是 按照 回调 顺序 发 生 的 。 

另外 ,在 动画 方法 中 ,要 注意 其 他 非 动 画 方法 会 插队 ,例如 css() 方 法 要 使 非 动画 方法 也 
按照 顺序 执行 ,这 时 需要 把 这 些 方法 写 在 动画 方法 的 回调 函数 中 才 可 以 解决 问题 。 

animate() 方 法 使 用 起 来 很 简单 ,常用 的 形式 为 : 


其 中 params 为 希望 进行 变幻 的 CSS 属性 列表 ,以 及 希望 变化 到 的 最 终 值 。duration 
为 可 选项 ,与 show()/hide() 中 的 参数 含义 完全 相同 。easing 为 可 选 参 数 ,通常 供 动画 插件 
192 


第 6 章 jQuery 编程 





使 用 ,用 来 控制 动画 节奏 的 变化 。jQuery 中 只 提供 了 linear 和 swing 两 个 值 。callback 为 
可 选 的 回调 函数 ,在 动画 完成 后 触发 .示例 代码 如 例 6-15 所 示 。 
【 例 6-15】 animate 动画 效果 示例 。 





animate() 方 法 的 功能 强大 ,可 以 使 用 它 来 代替 其 他 所 有 的 动画 方法 。 
(1) 用 animate() 方 法 代替 show() 方 法 





等 同 于 





(2) 用 animate() 方 法 代替 fadeIn() 方 法 


等 同 于 
(3) 用 animate() 方 法 代替 slideDown() 方 法 


等 同 
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(4) 用 animate() 方 法 代替 fadeTo() 方 法 
$("p") -animate ({opacity:"0.6"},200); 
等 同 于 
$("p") .fadeTo (200,0.6); 


事实 上 ,这 些 动画 就 是 animate() 方 法 的 一 种 内 置 了 特定 样式 属性 的 简写 形式 。 在 
animate() 方 法 中 ,这 些 特定 样式 的 属性 值 可 以 为 show、hide 和 toggle, 也 可 以 是 自 定 义 
数字 。 

6.2.6 DOM 操作 


文档 对 象 模型 (document object model, DOM) 是 万 维 网 联盟 (the world wide web 
consortium, W3C) 组 织 推荐 的 处 理 可 扩展 标志 语言 的 标准 编程 接口 , 它 是 以 面向 对 象 方式 
描述 的 文档 模型 。 使 用 jQuery 获得 的 MOM 对 象 包含 了 DOM 对 象 的 基本 特性 ,同时 又 进 
行 了 扩展 ,所 以 要 使 用 jQuery 操作 DOM 对 象 前 需要 对 其 进行 转换 ,在 jQuery 中 可 以 使 用 
关键 字 *$ () ”将 普通 HTML DOM 对 象 转换 为 jQuery DOM 对 象 ,例如 : 


var joObj=$ (document .getElementById ("msg")); 


以 上 代码 中 演示 了 如 何 获 取 id=="msg" 的 对 象 ,然后 将 DOM 对 象 转换 为 jQuery 对 象 
jObj。 

1. 查找 节点 

使 用 jQuery 在 文档 树 上 查找 节点 非常 容易 。 

(1) 查找 元 素 节 点 。 获 取 元 素 节 点 的 jQuery 代码 如 下 : 


var $1i=S$S("ul li:eq(1)"); // 获 取 第 二 个 <1i> 元 素 节点 
var 1i txt=$1i.text(); // 输 出 第 二 个 <1i> 元 素 节 点 的 text 


(2) 查找 属性 节点 。 利 用 jQuery 选择 器 查找 到 需要 的 元 素 后 ,就 可 以 使 用 attr() 方 法 
来 获取 它 的 各 种 属性 的 值 。attr( ) 方 法 的 参数 可 以 是 一 个 ,也 可 以 是 两 个 。 当 参数 是 一 个 
时 , 则 是 要 查询 的 属性 的 名 字 , 例 如， 


var $para=$ ("p"); // 获 取 <p> 节 点 
var p_txt=$para.attr ("title"); // 输 出 <p> 元 素 节点 属性 title 


2. 创建 节点 

利用 jQuery 选择 器 能 够 快捷 而 轻松 地 查找 到 文档 中 的 某 个 特定 的 元 素 节 点 ,然后 可 以 
用 attr() 方 法 来 获取 元 素 的 各 种 属性 的 值 。 

使 用 $ (html) 函数 完成 元 素 节 点 的 创建 ,该 函数 会 根据 传人 的 HTML 标记 字符 串 创 
建 一 个 DOM 对 象 后 返回 ,例如 : 





var $1i 1=$("<1i></li>"); // 创 建 第 一 个 <1i> 元 素 
Var $11 2=$("<1i></1i>"); // 创 建 第 二 个 <1i> 元 素 
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使 用 append() 或 appendTo() 方 法 可 将 创建 的 元 素 插 入 文档 中 。 


S$("ul") .append ($1i 1) 


S$("ul") .append ($1i 2) 7 


3. 插入 节点 

动态 创建 HTML 元 素 通 常 需要 插入 文档 中 。 让 它 成 为 这 个 文档 的 某 个 节点 的 子 节 
点 。 前 一 节 使 用 了 一 个 插入 节点 的 方法 append() , 它 会 在 元 素 内 部 追加 新 创建 的 内 容 。 在 
jQuery 中 还 提供 了 其 他 几 种 插入 节点 的 方法 ,如 表 6-12 所 示 。 


表 6-12 插入 节点 的 方法 


// 添 加 到 <ul> 节 点 中 








方 法 描 述 示 例 
HTML 代码 : 
<p>Hello</p> 
人 本 jQuery 代码 : 
append() 向 每 个 匹配 的 元 素 内 部 追加 内 容 $ ("p").append("<b>ijQuery=/b>>") 
结果 : 


一 p 二 Hello: 一 b>jQuery 一 /b 二 一 /p 二 





appendTo() 


将 所 有 匹配 的 元 素 追 加 到 指定 的 
元 素 中 


HTML 代码 : 

=p>Hallo</p> 

jQuery 代码 : 

$ ("=<b>jQuery=/b>"). appendTo("P") 
结果 : 


p> Hello<b>jQuery=/b><=/p> 





prepend() 


向 每 个 匹配 的 元 素 内 部 前 置 内 容 


HTML 代码 : 

<p>Hallo</p> 

jQuery 代码 : 

$C"p"). prepend(”"<b>ijQuery=/b>") 
结果 : 

<p><b>jQuery</b> Hello</p> 





prependTo() 


将 所 有 匹配 的 元 素 前 置 到 指定 的 
元 素 中 


HTML 代码 : 

<p>Haello</p> 

jQuery 代码 : 

$(" 一 b>jQuery 一 /b 二 "). prependTo(C"p") 
结果 : 

一 pb 二 一 b>jQuery</b> Hello </p> 





after() 





在 每 个 匹配 的 元 素 之 后 插入 内 容 





HTML 代码 : 

<p>Halo</p> 

jQuery 代码 : 

$C"p"). after ("<b>jQuery<=/b>") 
结果 : 

<p>Hello </p><b>ijQuery< /b> 
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续 表 
方 法 描 述 示 例 

HTML 代码 : 
<p>Hello</p> 

ey 将 所 有 匹配 的 元 素 插入 指定 的 元 |jQuery 代码 : 

素 前 $ ("<b>jQuery</b>"). insertAfter ("P") 
一 b> 你 好 :一 /b> 二 p 二 Hello 一 /p> 
HTML 代码 : 
<p>Haello</p> 
jQuery 代码 : 

before() 机 之 

eS 在 每 个 匹配 的 元 素 之 前 插 人 内 容 | $("p")，before ("二 b>jQuery</b>") 
结果 : 
一 b>jQuery 一 /b> 一 p 二 Hello </p> 
HTML 代码 : 
<p>Haello</p> 

insertBeforeC) 将 所 有 匹配 的 元 素 插入 指定 的 元 |jQuery 代码 : 

、 素 后 $ ("<b>jQuery</b>"). insertBefore ("p") 

结果 : 
=<p>Haello</p><b>iQuery=< /b> 








4. 删除 节点 
jQuery 提供 了 两 种 删除 节点 的 方法 , 即 remove() 和 empty()。 
(1) remove()。remove() 方 法 用 于 从 DOM 中 删除 所 有 匹配 的 元 素 , 例 如 : 


$ ("ul li:eq(0)").remove(); 


该 方法 在 获取 第 一 个 二 1i 一 元 素 节点 后 ,将 匹配 的 元 素 从 网 页 中 删除 。 

当 某 个 节点 用 remove() 方 法 删除 后 ,该 节点 所 包含 的 所 有 后 代 节 点 将 同时 被 删除 。 这 
个 方法 的 返回 值 是 一 个 指向 已 被 删除 的 节点 的 应 用 ,因此 可 以 以 后 再 使 用 这 些 元 素 。 

(2) empty()。empty() 方 法 不 是 删除 节点 ,而 是 清空 节点 , 它 能 清空 元 素 中 的 所 有 后 
代 节点 。 


$ ("ul li:eq(1)") .empty(); 


该 方法 在 获取 第 二 个 元 素 节 点 后 再 清空 此 元 素 里 的 内 容 。 

5. 替换 节点 

jQuery 提供 了 replaceWith() 和 replaceAll() 方 法 替换 节点 。 

replaceWith() 方 法 的 作用 是 将 所 有 匹配 的 元 素 都 蔡 换 成 指定 的 HTML 或 者 DOM 
元 素 。 

例如 要 将 网 页 中 的 “二 p title 王 "Hellow jQuery!" 二 Hellow jQuery? 一 /p 二 ”替换 成 
“< 一 strong 二 Hellow jQuery? 二 /strong 二 ”可 以 使 用 如 下 的 jQuery 代码 。 


$("p") .replaceWith ("<strong>Hellow jQuery2?< /strong>") 7 
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也 可 以 用 replaceAll() 来 实现 ,该 方法 与 replaceWith() 方 法 的 作用 相同 ,只 是 颠倒 了 
replaceWith() 操 作 , 可 以 使 用 如 下 的 jQuery 代码 实现 同样 的 功能 。 


6. 属性 操作 

在 jQuery 中 ,用 attr() 方 法 可 以 获取 和 设置 元 素 的 属性 ,removeAttr() 方 法 可 以 删除 
元 素 的 属性 。 

(1) 获取 元 素 值 。 


(2) 设置 属性 值 。 如 果 要 设置 一 p> 元 素 的 title 属性 值 ,也 可 以 使 用 同一 个 方法 ,不 过 
需要 传递 两 个 参数 , 即 名 称 和 对 应 的 值 。 


jQuery 可 以 一 次 性 为 同一 个 元 素 设置 多 个 属性 ,可 以 使 用 下 面 的 代码 来 实现 。 


以 上 代码 将 一 个 “名 / 值 " 形 式 的 对 象 设置 为 匹配 元 素 的 属性 。jQuery 中 的 很 多 方法 都 
是 用 同一 个 函数 实现 获取 (getter) 和 设置 (setter) 的 功能 ,例如 上 面 的 attr() 方 法 既 能 设置 
元 素 属 性 的 值 ,也 能 获取 元 素 属 性 的 值 。 类 似 的 还 有 html()、text()、height()、width()、 
val() 和 css() 等 方法 。 

(3) 删除 属性 。 使 用 removeAttr(attrName) 方 法 删除 属性 ,如 以 下 代码 删除 二 p 二 元 
素 的 title 属性。 





7. 样式 操作 
(1) 追加 样式 。jQuery 中 使 用 addClass() 方 法 来 追加 样式 ,如 例 6-16 所 示 。 
【 例 6-16】 追加 样式 。 
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$("p") .addclass ("newStyle"); // 追 加 newstyle 样式 
}) 7 
</script> 
<div class="oldstyle"> 这 里 是 原来 的 样式 < /div> 
<p class="oldSstyle"> 这 里 添加 了 新 样式 < /p> 
<input type="button" id="btnAdd" value=" 追 加 样式 " /> 


以 上 代码 中 , 当 单 击 id="btnAdd" 的 按钮 时 , 则 向 所 有 的 二 p 二 标签 追加 class 类 ,显示 
效果 如 图 6-8 所 示 。 ES 
(2) 移 除 样式 。 在 例 6-16 中 ,为 一 p 二 元 素 追 加 了 
newStyle 样式 。 此 时 一 pb 二 元 素 的 HTML 代码 变 为 ” 龙 甸 美加 了 苏 粮 式 
一 p class 王 "oldStyle newStyle" 盖 。 这 里 添加 了 新 样 Em 
式 二 /p 二 。 如 果 要 删除 元 素 的 样式 ,可 使 用 
removeClass() 方 法 , 它 的 作用 是 从 匹配 的 元 素 中 删除 图 过 加 样式 
全 部 或 者 指定 的 class。 











$("p") .removeClass ("high"); // 删 除 <p> 元 素 的 newstyle 样式 
$("p") .removeClass () 7 // 删 除 <p> 元 素 的 所 有 样式 


(3) 切换 样式 。jQuery 中 使 用 toggle() 方 法 实现 追加 样式 和 移 除 样式 的 交换 操作 , 语 
法 如 下 : 


$( 选 择 器 ) .toggle (function(){ 
// 显 示 元 素 

},function(){ 
// 隐 藏 元 素 

}) 


此 处 toggle() 方 法 的 作用 是 交替 执行 两 个 函数 ,如 果 元 素 原来 是 显示 的 , 则 隐藏 它 ;如 
果 元 素 原来 是 隐藏 的 , 则 显示 它 。 此 时 ,toggle() 方 法 主要 是 控制 行为 上 的 重复 切换 。 

(4) 判断 样式 。hasClass() 可 以 用 来 判断 元 素 中 是 否 含 有 某 个 class, 如 果 含 有 则 返回 
true, 否则 返回 false, 如 : 





$("p") .hasClass ("newStyle"); 


以 上 代码 判断 二 p 二 元 素 中 是 否 含有 newStyle 的 class 样式 。 

8. 设置 和 获取 HTML 或 文本 

(1) html()。jQuery 中 的 html() 方 法 用 于 获取 元 素 的 HTML 内 容 , 该 方法 的 功能 类 
似 于 JavaScript 中 的 innerHTML 属性 ,可 以 用 来 读 取 或 者 设置 某 个 元 素 中 的 HTML 内 
容 。 该 方法 可 以 有 一 个 参数 , 当 给 参数 赋值 时 ,其 功能 为 设置 元 素 的 HTML 内 容 。 





var html=$("p") .html (); // 获 取 <p> 元 素 的 HTML 内 容 
$("p") .html ("<b>Hello world< /b>"); // 设 置 <p> 元 素 的 HTML 内 容 为 "<b>Hello 
world</b>" 
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(2) text() 方 法 。text() 方 法 类 似 于 JavaScript 中 的 innerText 属性 ,可 以 用 来 读 取 或 
者 设置 某 个 元 素 中 的 文本 内 容 。 该 方法 可 以 有 一 个 参数 , 当 给 参数 赋值 时 ,其 功能 为 设置 元 
素 的 文本 内 容 。 


var html=$("p") .text (); // 获 取 <p> 元 素 的 文本 内 容 
$("p") .text ("Hello world"); // 设 置 <p> 元 素 的 HTML 文 本 内 容 为 "Hello world" 





(3) val() 方 法 。val() 方 法 类 似 于 JavaScript 中 的 value 属性 ,可 以 用 来 设置 和 获取 元 
素 的 值 。 无 论 元 素 是 文本 框 、 下 拉 列 表 还 是 单 选 框 , 它 都 可 以 返回 元 素 值 。 如 果 元 素 为 多 
选 , 则 返回 一 个 包含 所 有 选择 值 的 数组 。val() 方 法 带 一 个 参数 时 表示 给 对 象 设置 值 。 


$("#name") .val() 7 // 获 取 ida= "name" 元 素 的 文本 值 

$("#name ") .val ("jQuery"); // 获 取 id="name" 元 素 的 文本 值 为 jQuery 
$(":checkbox") .val (); // 获 取 所 有 type="checkbox" 元 素 的 选中 值 
$(":radio") .val (["1"]); // 初 始 化 type=" radio" 元 素 的 选中 值 


6.2.7 解决 冲突 


在 jQuery 中 ,$ 是 jQuery 的 别名 ,所 有 使 用 $ 的 地 方 也 都 可 以 使 用 jQuery 来 蔡 换 ,如 
$0#id) 等 同 于 jQuery('#id") 的 写法 。 但 很 多 时 候 自 定义 $ (id) 方 法 来 获取 一 个 元 素 , 或 
者 其 他 的 一 些 JavaScript 类 库 。 如 : Prototype 也 定义 了 $ 方 法 ,如 果 同 时 把 这 些 内 容 放 在 
一 起 就 会 引起 变量 方法 定义 的 冲突 ,jQuery 专门 提供 了 方法 用 于 解决 此 问题 , 即 通 过 调用 
$. noConflict() 向 该 库 返 回 控制 权 。 下 面 以 引入 两 个 库 文件 jquery. js 和 prototype. js 为 
例 来 进行 说 明 。 

1. jquery.js 在 prototype.js 之 后 进行 引入 





<!-- 引 入 prototype --> 

<script src="prototype.js" type="text/javascript"></script> 
<!-- 引 入 jQuery --> 

<script src="jquery.min.js" type="text/javascript"></script> 


在 这 种 情况 下 ,选择 器 代码 如 果 为 $0'#id). hide() , 则 $ 代表 的 永远 是 jQuery 中 定义 
的 $ 符 号 ,但 可 以 写成 jQuery('#id"). hide() 来 解决 此 问题 。 如 果 要 使 用 Prototype 中 的 
$ , 则 应 使 用 jQuery. noConflict() 方 法 。 解 决 方法 有 四 种 。 

(1) 将 $ 的 控制 权 让 给 Prototype, 示 例 代 码 如 例 6-17 所 示 。 

【 例 6-17】 jquery.js 在 prototype. js 之 前 进行 引入 的 冲突 解决 。 


<div id="divjquery"> 
jQuery 操作 :<br/> 
jquery.js 在 prototype.js 之 前 进行 引入 的 冲突 解决 
</div> 
<div id="divPrototype">Prototype 操作 区 域 </div> 
<script type="text/javascript"> 


// 将 变量 $ 的 控制 权 让 给 prototype.js 
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例 6-17 中 ,程序 运行 时 id= 二 "divPrototype" 的 标签 会 隐藏 , 单 击 标签 id 一 "divJquery" 
时 ,会 用 alert() 弹 出 执行 后 的 结果 信息 ,程序 的 运行 结果 如 图 6-9 所 示 。 


jQuery 操作 : 
jQueryjs 在 prototypejs 之 前 进行 引入 的 冲突 解决 





图 6-9 jQuery 冲突 解决 运行 结果 1 


(2) 自 定义 一 个 jQuery. noConflict() 比较 短 的 对 象 ,使 用 的 时 候 直 接 调 用 较 短 的 对 象 
来 代替 jQuery 库 , 示 例 代码 如 下 : 
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(3) 给 jQuery(function()) 函数 指 定 参 数 为 $ ,这 样 就 可 以 继续 在 该 函数 内 使 用 $ 作为 
jQuery 对 象 ,示例 代码 如 下 : 








(4) 使 用 匿名 函数 方式 解决 ,在 匿名 函数 传递 参数 时 , 实 参 使 用 jQuery, 示 例 代 码 如 下 : 





2. jquery.js 在 prototype.js 之 前 进行 引入 

在 这 种 情况 下 ,如 果 我 们 直接 写 $ ('#id), 则 $ 此 时 代表 的 prototype.js 中 定义 的 $ 
符号 。 如 果 想 要 调用 jquery.js 中 提供 的 各 种 功能 ,只 能 用 全 称 写法 jQuery('#id") 才 能 实 
现 ,代码 如 例 6-18 所 示 。 

【 例 6-18】 jquery.js 在 prototype. js 之 前 进行 引入 的 冲突 解决 。 
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<!-- 引 入 jQuery --> 

<script src="jquery.min.js" type="text/javascript"></script> 
<!-- 引 入 prototype --> 

<script src="prototype.js" type="text/javascript"></script> 
<body> 


<div id="divJquery"> 
jquery.js 在 prototype.js 之 前 进行 引入 的 冲突 解决 <br/> 
执行 结果 : jQuery 操作 的 对 象 弹出 对 话 框 <br/> 
Prototype 执行 后 ,字体 变 大 

</div> 

<div id="divPrototype">Prototype 操作 区 域 </div> 

<script type= "text/javascript"> 





jQuery.noConflict (); // 将 变量 $ 的 控制 权 让 给 prototype.js 
(function($){ // 定 义 匿名 函数 并 设置 形 参 为 $ 
$ (function(){ // 匿 名 函数 内 部 的 $ 均 为 jQuery 
$("#divjquery") .click (function(){ // 继 续 使 用 $ 方 法 


alert ($ (this) .text ()); 
旭光 
]) 7 


}) (jQuery); // 执 行 匿名 函数 且 传 递 实 参 jQuery 


// 使 用 prototype 


$ ("divPrototype") .style.border="5px solid #000"; // 设 置 边框 


</script> 
</body> 


例 6-18 在 运行 后 ,id 二 "divPrototype" 的 标 
id 一 "divPrototype" ,会 弹出 提示 信息 ,程序 的 运行 结果 如 图 6-10 所 示 。 





jquery js 在 prototype js 之 前 进行 引入 的 冲突 解决 
轿 行 妆 果 ， ee 
Prof 


从 


人 2 个 像素 的 黑色 边框 ， 





图 6-10 jQuery 冲突 解决 运行 结果 2 


6.2.8 编写 插件 
插件 





单 击 标签 


的 目的 是 给 已 经 有 的 一 系列 方法 或 函数 做 一 个 封装 ,以 便 在 其 他 地 方 重复 使 


用 ,方便 后 期 的 维护 。jQuery 除了 提供 一 个 简单 有效 的 方式 管理 元 素 以 及 脚本 外 ,还 提供 
了 一 种 机 制 : 即 给 核心 模块 增加 自己 的 方法 和 额外 的 功能 。 通 过 这 种 机 制 ,jQuery 允许 用 











户 创建 属于 自己 的 插件 ,从 而 提高 开发 效率 。 
1. 类 级 别 的 插件 开发 





方法 。 典 型 的 例子 就 是 $ .ajax() 函数 ,将 函数 定义 于 jQuery 的 命名 空 
的 插件 开发 可 以 采用 如 下 几 种 形式 进行 扩展 。 
(1) 添加 一 个 新 的 全 局 函数 。 添 加 一 个 全 局 函数 ,定义 如 下 : 
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间 中 。 关 了 


对 类 级 别 的 插件 开发 最 直接 的 理解 就 是 给 jQuery 类 添加 类 方法 ,可 以 理解 为 添加 静态 


F 类 级 别 
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调用 方法 可 以 这 样 写 : 










或 者 


(2) 增加 多 个 全 局 函数 。 如 果 要 同时 添加 多 个 全 局 函数 ,可 采用 如 下 定义 : 





调用 时 与 一 个 函数 的 调用 方法 相同 。 










或 者 


(3) 使 用 jQuery. extend(object) 方 法 。 我 们 还 可 以 使 用 jQuery. extend(object) 方 法 来 
扩展 并 定义 新 的 全 局 函数 ,表达 形式 如 下 : 





调用 的 时 候 可 以 这 样 写 : 
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(4) 使 用 命名 空间 。 虽 然 在 jQuery 命名 空间 中 ,禁止 使 用 大 量 的 JavaScript 函数 名 和 
变量 名 。 但 是 仍然 难以 避免 某 些 函 数 或 变量 名 将 与 其 他 jQuery 插件 冲突 ,因此 用 户 最 好 将 
方法 封装 到 另 一 个 自 定义 的 命名 空间 中 ,可 以 避免 命名 空间 内 函数 的 冲突 。 





采用 新 命名 空间 的 函数 仍然 是 全 局 函数 ,调用 时 需要 指定 命名 空间 ,调用 的 方法 为 : 





2. 对 象 级 别 的 插件 开发 
对 象 级 别 的 插件 开发 有 两 种 形式 。 
形式 1: 此 种 形式 通过 fn. extend() 函 数 的 方法 来 定义 插件 的 名 称 , 结 构 定义 如 下 : 





形式 2: 此 种 形式 通过 直接 指定 插件 名 称 来 实现 插件 ,结构 定义 如 下 : 





上 面 两 种 实现 方式 均 定义 了 一 个 jQuery 函数 , 形 参 是 $。 函 数 定 义 完 成 之 后 , 把 
jQuery 这 个 实 参 传递 进去 ,这 样 我 们 在 写 jQuery 插件 时 ,就 可 以 在 插件 内 部 使 用 $ 这 个 别 
名 ,而 不 会 与 prototype 等 其 他 JavaScript 库 起 冲突 。 下 面 将 详细 分 析 各 种 情况 的 使 用 
示例 。 

(1) 在 jQuery 名 称 空间 下 声明 一 个 名 字 。 这 里 举例 说 明 一 个 单一 插件 的 实现 表达 。 
如 果 你 准备 同时 开发 多 个 插件 ,那么 需要 声明 多 个 函数 名 字 。 通 常 当 在 编写 一 个 插件 时 , 力 
求 仅 使 用 一 个 名 字 来 包含 它 的 所 有 内 容 。 比 如 要 创建 一 个 分 页 的 插件 ,将 其 命名 为 
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Paging, 则 该 插件 的 示例 代码 为 : 


Paging 插件 的 调用 方式 为 : 


(2) 设置 options 参数 控制 插件 的 行为 。 在 开发 插件 时 ,往往 会 向 插件 内 部 提供 一 定 的 
参数 ,通过 这 个 参数 可 以 控制 插件 的 行为 ,比如 为 Paging 插件 指定 当前 分 页 的 索引 页 (参数 
pageIndex) 和 每 页 显示 的 数据 条 数 (参数 pageSize)。 通 常 的 做 法 是 ,将 所 有 的 参数 封装 在 
一 个 JSON 对 象 中 ,这 个 对 象 的 名 称 为 options, 最 后 将 对 象 传递 给 插件 函数 。 例 如 : 





Paging 插件 的 调用 方式 为 : 





(3) 暴露 插件 的 默认 设置 。 为 减少 插件 的 使 用 者 用 较 少 的 代码 覆盖 默认 参数 ,可 以 通 
过 暴露 插件 的 默认 的 方式 设置 options 参数 ,以 Paging 插件 为 例 ,示例 代码 如 下 : 





205 


交互 式 Web 前 端 开 发 实践 








插件 的 调用 。 由 于 使 用 了 默认 值 覆盖 参数 的 方法 ,在 程序 调用 时 ,只 需要 在 
$ (document). ready() 函数 中 调用 一 次 插件 的 默认 方法 ,以 后 插件 的 使 用 均 不 需要 再 重复 
指定 默认 值 中 的 参数 。 

如 果 这 样 调用 插件 : 





调用 后 ,分 页 插件 会 每 页 显示 25 条 记录 。 
如 果 在 $ (document). ready() 函数 中 这 样 调 用 了 插件 : 





调用 后 ,分 页 插件 会 每 页 显示 30 条 记录 。 
还 可 以 通过 传递 配置 参数 给 插件 方法 来 覆盖 默认 设置 ,示例 如 下 : 





(4) 公开 插件 函数 来 提高 插件 的 扩展 性 。 如 果 想 让 开发 的 插件 具有 更 好 的 灵活 性 , 允 
许 其 他 使 用 者 进行 功能 扩展 ,除了 可 向 插件 传递 参数 外 .还 可 以 使 用 公开 部 分 函数 的 方式 来 
提升 功能 性 。 比 如 给 Paging 插件 提供 一 个 用 于 呈现 分 页 控件 HTML 内 容 的 函数 
OutputHTML ,示例 代 码 如 下 : 
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调用 以 上 代码 只 需 实现 公开 的 函数 部 分 即 可 ,比如 如 下 的 调用 示例 。 





(5) 保持 私有 函数 的 私有 性 。 有 时 用 户 不 希望 插件 中 的 所 有 函数 都 能 被 公开 访问 ,这 
就 需要 对 函数 的 可 访问 性 做 一 定 的 设置 ,通过 这 种 方式 的 处 理 , 可 以 根据 插件 的 序号 少 暴露 
插件 的 函数 信息 。 

比如 用 户 希 望 在 插件 中 能 实现 输出 调试 结果 ,可 以 在 一 个 闭 包 的 方法 中 定义 此 私有 方 
法 ,示例 代码 如 下 : 
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由 于 OutputLogs 方法 定义 在 特定 环境 中 , 闭 包 外 部 无 法 访问 进来 ,因此 可 以 实现 函数 
的 私有 访问 性 。 

3. 编写 插件 的 注意 事项 

(1) 插件 的 推荐 命名 方法 为 : 


(2) 所 有 的 对 象 方法 都 应 当 附 加 到 jQuery. fn 对 象 上 面 , 而 所 有 的 全 局 函数 都 应 当 附 
加 到 jQuery 对 象 本 身 。 

(3) 在 插件 内 部 ,this 指向 的 是 当前 通过 选择 器 获取 的 jQuery 对 象 , 而 不 像 一 般 方法 
那样 ,内 部 的 this 指向 的 是 DOM 元 素 。 

(4) 可 以 通过 this. each 来 遍历 所 有 的 元 素 。 

(5) 所 有 方法 或 函数 插件 ,都 应 当 以 分 号 结尾 ,否则 压缩 的 时 候 可 能 会 出 现 问题 。 为 了 
更 加 保险 ,可 以 在 插件 头 部 添加 一 个 分 号 (;) ,以 免 它们 的 不 规范 代码 给 插件 带 来 影响 。 

(6) 插件 应 该 返回 一 个 jQuery 对 象 ,以 保证 插件 的 可 链 式 操作 。 

(7) 避免 在 插件 内 部 使 用 $ 作为 jQuery 对 象 的 别名 ,而 应 当 使 用 完整 的 jQuery 来 表 
示 , 这 样 可 以 避免 冲突 。 

jQuery 的 插件 分 为 封装 对 象 方法 、 封 装 全 局 函数 两 种 类 型 。 

(1) 封装 对 象 方法 的 插件 , 即 给 jQuery 对 象 添加 方法 。 

(2) 封装 全 局 函数 的 插件 (类 级 别 开 发 ), 即 给 jQuery 添加 新 的 全 局 函数 ,相当 于 给 
jQuery 类 本 身 添加 方法 ,与 调用 jQuery 其 他 函数 的 使 用 方法 相同 。 

【 例 6-19】 添加 一 个 jQuery 插件 ,使 其 显示 提示 框 。 

(1) 新 建 一 个 名 为 jQuery. JQueryPlugInTest. js 的 JavaScript 文件 ,并 添加 下 面 的 
代码 ; 





(2) 新 建 一 个 名 为 testPlugIn. html 的 HTML 页 面 。 

(3) 打开 testPlugIn. html 页 面 ,添加 对 jQuery.JQueryPlugIntest. js 文件 的 引用 ,并 添 
加 调用 新 插件 的 函数 ,代码 如 下 : 
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<script type="text/javascript" src="Scripts/jQuery.min.js"></script> 
<script type="text/javascript" src="jQuery.JQueryPlugInTest.js"></script> 
<script type= "text/javascript"> 
function test() { 
// 调 用 插件 jQuery .JQueryPlugInTest.js 中 的 函数 
Var a=1,b=2; 
var rv= ($.addPlugin(1,2)); 
alert (a.tostring()+"+"+b.tostring ()+"="+rv); // 输 出 结果 
} 
</script> 


(4) 在 二 body 盖 二 /body 盖 标签 中 添加 "测试 ?按钮 ,代码 如 下 : 
<input type= "button" onclick="test() "value= "测试 jQuery 插件 " /> 


(5) 单 击 “测试 jQuery 插件 ”按钮 ,界面 如 图 6-11 所 示 。 





图 6-11 jQuery 插件 运行 示例 


6.3 第 三 方 插件 及 使 用 方法 











日 于 jQuery 支持 灵活 的 插件 开发 . 近 几 年 来 ,jQuery 开发 爱好 者 不 断 开 发 出 各 种 优秀 
的 第 三 方 jQuery 插件 ,通常 按照 如 下 五 种 不 同 的 类 型 进行 归 类 。 

1. UI 类 

UI 类 的 插件 用 于 实现 UI 界面 的 美化 ,内 容 丰 富 , 包 括 背 景 插件 ,对话 框 和 灯箱 插件 、 
筛选 及 排序 插件 、 反 馈 插件 .弹出 层 插件 . 悬 停 插件 ,布局 插件 .图 表 插 件 . 加 载 插件 、. 圆 边 插 
件 ,滚动 插件 .标签 插件 .文本 链接 插件 .工具 提示 插件 .网 络 类 型 插件 等 ,图 6-12 所 示 展 示 
了 酷 炫 的 弹出 层 插件 运行 效果 。 

2. 输入 类 

输入 插件 用 于 实现 各 种 数据 的 快速 输入 ,常见 输入 类 插件 有 : 颜色 拾取 器 插件 .定制 和 
风格 插件 日 期 和 时 间 插 件 、 拖 放 插 件 、 通 用 输入 插件 、 自 动 完 成 插件 、 密 码 插件 ,投票 率 插 
件 、 搜 索 插 件 、 选 择 框 插件 、 快 捷 键 插件 、 触 摸 插件 、 上 传 插件 、 验 证 插件 等 ,图 6-13 所 示 为 输 
入 插件 的 运行 效果 。 

3. 媒体 类 

媒体 类 控件 用 于 实现 个 性 化 的 媒体 展示 ,包括 音频 和 视频 插件 .幻灯 片 和 轮 播 图 插件 、 
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sample 1 





图 6-12 弹出 层 插件 运行 效果 


File~ Edtv View~ Format™ 
和 Fomats- B 7 至 至 三 各 
注 注 下 下 


这 里 是 富 文 本 输入 框 ， 很 区 用 . 


图 6-13 输入 插件 的 运行 效果 


图 片 展示 插件 .图 像 插 件 、 地 图 插件 、 滑 块 和 旋转 插件 、Tabs 插件 等 ,图 6-14 所 示 为 幻灯 片 
和 轮 播 图 插件 的 运行 效果 。 





图 6-14 幻灯 片 和 轮 播 图 插件 的 运行 效果 


4. 导航 类 

UI 中 导航 的 展示 方式 有 很 多 种 ,常见 的 导航 插件 包括 水 平 导 航 插件 .垂直 导航 插件 、 文 
件 树 插件 、 分 页 插件 、 手 风琴 菜单 插件 等 .图 6-15 所 示 为 文件 树 插件 的 运行 效果 。 

5. 其 他 类 

除了 以 上 四 种 大 类 插件 外 ,还 有 一 些 适应 性 很 强 的 插件 .如 动画 效果 、 浏 览 器 调整 插件 、 
移动 插件 、 独 立 的 部 件 插 件 、 杂 项 插件 、 游 戏 插件 等 ,图 6-16 所 示 为 游戏 插件 的 运行 效果 。 
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了 加 已 常用 文件 夹 
口 所 有 未 读 
口 置顶 邮件 
口 标签 邮件 
了 加 已 我 的 邮箱 
翌 回 QQ 邮箱 
* 昌 和 收 件 箱 
是 口 已 发 出 的 邮件 
日 口 垃圾 邮件 
上 回 田 阿里 云 邮 


图 6-15 文件 树 插件 的 运行 效果 


同 


回 回 








ek:Te [SA 





图 6-16 ”游戏 插件 的 运行 效果 


尽管 插件 种 类 繁多 .但 都 属于 功能 强大 使 用 简单 的 类 型 。 本 节 将 以 输入 类 插件 一 一 校 
验 控 件 (formValidator) 和 日 期 插件 (My97DatePicker) 为 例 来 说 明 其 使 用 方法 


6.3.1 校 验 控件 formValidator 


在 开发 基于 B/S 架构 体系 风格 的 应 用 系统 时 ,必须 对 用 户 输入 的 内 容 进行 合法 性 验 

FE, 常见 的 验证 有 非 空 验证 ,长 度 验证 内容 合法 性 验证 (如 数字 、E-mail 格式 等 ), 以 及 业务 
a 证 (如 系统 中 注册 用 户 不 能 相同 ) 
Web 前 端 开 发 者 (JavaScript 开发 者 ) 往 往 需 要 编写 大 量 的 JavaScript 代码 来 进行 元 素 
校 验 ,而 这 些 验证 在 平时 开发 中 不 停 地 重复 书写 。 一 般 要 判断 的 表单 元 素 比较 多 ,开发 过 程 
就 显得 枯燥 无 味 且 浏览 器 之 间 兼 容 性 
jQuery formValidator 属于 输入 类 的 插件 , 它 的 使 用 方法 较 简 单 ,只 需要 进行 简单 的 配 





















置 Sl de gv 仿 ,使 开发 者 重点 关注 业务 逻辑 的 实现 ,无 须 关 心 验证 
的 实现 过 程 。 它 包括 常规 检验 功能 和 可 扩展 校 验 功能 。 针 对 每 个 表单 ,只 需要 写 一 行 
配置 信 ea 而 这 些 配 置信 息 无 须 写 和 人 表单 元 素 , 实 现 了 JavaScript 代码 和 





HTML 代码 的 分 离 且 具备 跨 浏览 器 的 能 力 
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1. 获取 formValidator 


(1) 官方 下 载 和 在 线 演示 地 址 : http://www. formvalidator. net/。 


(2) 使 用 百度 搜索 formValidator 获取 JavaScript 文件 。 


2. jQuery formValidator 插件 的 API 
目前 formValidator 支持 五 种 大 的 校 验 方式 : inputValidator( 针 对 input、 textarea、 
select 控件 的 字符 长 度 、 值 范围 .选择 个 数 的 控制 )、compareValidator (提供 2 个 对 象 的 比 
较 , 目 前 可 以 比较 字符 串 和 数值 型 ) .ajaxValidator( 通 过 ajax 到 服务 器 上 做 数据 校 验 )、 
regexValidator( 提 供 可 扩展 的 正则 表达 式 库 ) functionValidator( 提 供 可 扩展 函数 库 来 做 校 
验 ), 每 种 校 验 方式 支持 的 控件 类 型 如 表 6-13 所 示 。 


表 6-13 ”formValidator 校 验 控件 的 五 种 校 验方 式 与 HTML 控件 之 间 的 关系 对 照 表 

















校 验 方式 text radio checkbox file password textarea select-one 
inputValidator ~ JV Vv NA NA NA V 
compareValidator Vv Vv NA V 
ajaxValidator ~v Vv Vv NA NA 
regexValidator Vv Vv NA ~ 
functionValidator JV V V V JV JV V 























目前 插件 提示 错误 有 两 种 模式 为 showword 和 showalert, 即 文字 提示 和 窗口 提示 ,下 
面 的 五 种 验证 方式 ,针对 showalert 这 种 模式 并 不 都 是 必需 的 , 表 6-14 分 别 罗列 出 了 全 局 初 
始 化 和 五 种 校 验 方式 公开 的 属性 。 

表 6-14 全 局 初始 化 及 检验 方式 公开 的 属性 


























属性 属性 名 称 默 认 值 提示 框 详细 解释 
TR . /|= 全 的 近 休 可 以 分 区 丰 
empty 确定 是 否 可 以 为 空 | false NA 
输入 错误 并 离开 焦 先 给 出 提示 然后 自动 修复 ,目前 
autoModify 点 时 , 自动 修复 |true 只 支持 text, file、 textarea 三 种 
错误 类 型 
二 = 加 i 可 以 为 空 ,为 空 时 有 提示 。 为 空 
onEmpty 空 值 时 的 提示 输入 内 容 为 空 时 即 不 显示 内 容 
onShow 显示 时 的 提示 "请 输入 内 容 ” 为 空 时 不 显示 内 容 
onFocus 获得 焦点 的 提示 。 | "请 输入 内 容 ” 为 空 时 不 显示 内 容 
当 焦 点 离开 控件 的 时 候 , 如 果 输 
onCorrect 输入 正确 后 的 提示 | "输入 正确 " 入 正确 将 出 现 该 提示 。 为 空 时 
不 显示 内 容 
如 果 不 自 动 构建 提示 层 , 表 示 提 
eg 示 层 的 ID 号 ;如 果 自 动 构建 提 
tipID 显示 错误 的 容器 ID| 表单 ID 十 "Tip 示 层 , 表示 提示 层 相对 的 目标 
控件 
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续 表 
属 性 属性 名 称 默 认 值 提示 框 详细 解释 
有 自动 构建 的 提示 层 | 10P* 5 toP ， 主要 用 于 定位 自动 构建 的 提 
tipCss lpx";" height":" 20px"; 
样式 Pet 示 层 
width" :"250px 
forceValid 强制 输 人 的 值 必须 | true | 本 天 是 否 和 一 个 多才 字符 当 作 
有 效 2 个 长 度 的 参数 
确定 ajaxValidator 是 否 把 该 表 
We 提交 服务 器 ibe | 单 提交 给 服务 器 
针对 所 有 input 和 select 表单 。 
defaultValue ”| 默认 值 null Vv 如 果 不 设置 就 保持 原 值 ,一 旦 设 
置 就 设 为 默认 值 
当前 支持 2 种 属性 值 。 
blur: 失去 焦点 的 时 候 触 发 。 
triggerEvent “| 默认 值 blur V/ change: 当 输入 框 里 的 值 发 生 改 
变 时 触发 
; | 当 输入 前 后 带 空格 的 字符 时 , 确 
trimValue 默认 值 false Vv 定 是 否 自动 把 空 字符 去 掉 
(1) inputValidator 校 验 控件 的 属性 如 表 6-15 所 示 。 
表 6-15 ”inputValidator 校 验 控件 的 属性 
属 性 属性 名 称 默认 值 详细 解释 
(对 select 无 效 ) 
"size" ; 表示 比较 长 度 , 为 默认 值 。 
type 比较 类 型 "size” ee 
"datetime" : 长 日 期 类 型 
默认 数值 型 。 如 果 进 行 字符 比较 ,请 输入 字符 型 。 
_ Ry 对 于 select-one 而 言 ,inputValidator 里 的 参数 min 和 
min 最 小 长 度 / 值 8 max 表示 选择 的 索引 号 范围 ;对 于 select-multiple 而 言 ， 
inputValidator 里 的 参数 min 和 max 表示 选择 的 个 数 
max 最 大 长 度 / 值 99999999999| 同 上 
onError 发 生 错误 时 的 提示 | "输入 错误 ”| 为 空 时 不 显示 内 容 
onErrorMin 属性 小 时 的 | sunl 当 用 户 输入 的 值 比 min 属性 小 时 进行 错误 提示 
onErrorMax pi 村 性 大 册 的 ll 当 用 户 输入 的 值 比 max 属性 大 时 进行 错误 提示 
leftEmpty: 表示 左边 是 否 允 许 为 空 , 默 认 值 为 true。 
a 确定 控件 文本 值 是 | 两 边 都 允许 | rightEmpty: 表示 右边 是 否 允 许 为 空 ,默认 值 为 true。 
SE 否 允 许 两 边 为 空 | 出现 空 emptyError: 出 现 该 错误 时 提示 。 默 认 值 为 null, 表示 








利用 onError 属性 来 提示 错误 





213 








| 


(2) regexValidator 校 验 控件 的 属性 如 表 6-16 所 示 。 




















表 6-16 ”regexValidator 校 验 控件 的 属性 
属 性 属性 名 称 默认 值 详细 解释 
采用 的 是 显 式 构造 函数 : 
E 正则 表达 式 或 表达 | ,, new RegExp("pattern"[,"flags"]); 由 于 JavaScript 
I 式 数组 中 御用 作 转 义 字符 ,所 以 在 使 用 显 式 构造 函数 构造 
实例 对 象 的 时 候 , 需 要 使 用 \\' 代替 \' 
g: 代表 可 以 进行 全 局 匹配 。 
Ga i: 代表 不 区 分 大 小 写 进 行 匹 配 。 
prem 周 加 参数 l ms 代表 可 以 进行 多 行 匹配 。 
以 上 参数 可 以 任意 组 全 ,当然 也 可 以 不 加 参数 
compareType | 比较 类 型 ie "|| "表示 或 的 关系 ,"&&& "表示 并 列 
"string" 表 示 自 己 写 的 表达 式 ;"enum" 表 示 枚 举 名 ， 
ataT 数据 类 型 人 字符 串 数组 类 型 。 具 体 请 见 demo3. htm。 
人 SO 可 以 自己 进行 修改 .添加 formValidatorRegex. js 里 的 
枚 举 项 目 名 和 表达 式 
onError: 发 生 错误 的 提示 "输入 错误 ”| 为 空 时 不 显示 内 容 











(3) ajaxValidator 校 验 控件 的 属性 如 表 6-17 所 示 。 
表 6-17 ajaxValidator 校 验 控件 的 属性 


















































届 ”性 属性 名 称 默认 值 详细 解释 
type 请 求 的 类 型 "GET" "POST" 或 "GET" 
> 是 在 服务 器 端 ,可 以 通过 name 为 clientid 获 
Nt 取 触发 验证 的 控件 ID 名 称 
dataType 返回 的 数据 类 型 "html" XML HTML Script\JSon .Text 
timeout 超时 设置 999 
i 数据 " 
i 是 否 以 异步 的 方式 发 送 。 |true 
success 当 请 求 成 功 时 调用 的 函数 | null 
在 默认 的 情况 下 ,如果 data 选项 传人 的 
人 I ie 数据 是 一 个 对 象 而 不 是 字符 串 ,将 会 自动 
| 地 被 处 理 和 转换 成 一 个 查询 字符 串 
complete | 当 请 求 完成 时 调用 的 函数 null 
beforeSend ”| 当 请 求 前 时 调用 的 函数 。 |null 有 一 个 参数 , 跟 $. ajax 里 的 beforeSend 
参数 一 样 
gw 9 | 6 当 你 触发 了 ajax 校 验 ,buttons 里 对 应 的 
和 | 按钮 (组 ) 就 会 变 为 灰色 ,一 直 等 待 服务 器 
mt 返回 数据 为 止 
me | 你 可 以 自己 定义 这 个 错误 ,在 error 里 自 
error 当 请 求 失败 时 调用 的 提示 | "请 求 失败 sat 
onWait 正在 校 验 的 提示 ee 
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续 表 
属 性 属性 名 称 默认 值 详细 解释 
a i "服务 器 校 验 没 
onError 校 验 没有 通过 的 提示 有 通过 " 





注意 : 

G@ 在 提交 的 时 候 自动 追加 clientID 参数 ,表示 触发 校 验 的 控件 ID。 

@ 在 提交 的 时 候 自动 追加 rand 参数 ,这 是 个 随机 数 。 

@ 几乎 所 有 的 属性 跟 $.ajax() 的 属性 一 样 ,请 参考 和 $$.ajax() 函 数 的 帮助 。 


(4) functionValidator 校 验 控 件 的 属性 如 表 6-18 所 示 。 
表 6-18 ”functionValidator 校 验 控件 的 属性 
























































属 性 属性 名 称 默认 值 返回 值 的 解释 
外 部 函数 名 ()。 默认 当 作 处 true/false: 校 验 成 功 / 失 败 。 
fun 参数 1 :元 素 的 值 。 理 过 程 字符 串 : 校 验 失败 ,返回 值 当 作 自 定义 错误 。 
参数 2: 元 素 对 象 无 : 处 理 过 程 
onError 发 生 错 误 的 提示 "输入 错误 ”| 函数 返回 false 的 时 候 , 显 示 该 错误 信息 
(5) 在 使 用 formValidator 前 需 对 其 进行 初始 化 ,初始 化 formValidator 的 函数 如 表 6-19 所 示 。 
表 6-19 初始 化 formValidator 的 函数 
函 数 名 函数 说 明 
参数 为 配置 类 型 。 
属 性 默认 值 说 明 
validatorGroup 几 下 确定 要 针对 哪个 组 进行 配置 
foe np 要 自动 注册 pagelsValid 函数 的 表单 
ID 号 
alertMessage false 确定 是 否 弹出 窗口 
autoTip false 确定 是 否 自动 构建 提示 层 
es i 确定 发 生 错误 的 时 候 , 第 一 个 出 错 控 
件 是 否 获 得 焦点 
forceValid ee 确定 是 否 一 直到 输入 正确 才 允 许 离 
开 焦 点 
| de 确定 是 否 把 一 个 全 角 字符 当 作 2 个 长 度 
oes null 该 组 校 验 通 过 后 的 回调 函数 ,返回 
false 则 阻止 表单 的 提交 
submitOnce false 确定 校 验 通过 后 ,是 否 使 所 有 的 “ 提 


交 ” 按 钮 变 灰 色 


de 参数 1: 一 个 校 验 没 有 通过 的 错误 信息 。 
submitAfterAjaxPrompt| 行 服务 器 pe ee a 


ee 通过 $. map 来 遍历 


该 组 校 验 失败 后 的 回调 函数 ， 有 两 








onError null 




















个 参数 
debug false 是 否 处 于 调试 模式 。true: 不 提交 表单 





过 全 
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函 数 名 


续 表 
函数 说 明 





$. formValidator. pagelsValid 


有 一 个 参数 ,不 是 配置 类 型 。validatorGroup 表示 要 针对 哪个 组 进行 验证 





$. formValidator. isOne Valid 


有 一 个 参数 ,为 当时 设置 验证 的 表单 元 素 ID。 返 回 是 否 校 验 成 功 的 信息 





$. formValidator. setFailState 


用 法 为 function("tipid" ," 显 示 的 信息 ") 。 
在 showword 模式 下 ,如 果 额 外 校 验 没有 通过 ,可 以 通过 它 来 设置 成 失败 
信息 和 状态 





$. formValidator. getLength 


用 法 为 function(" 表 单元 素 id") 。 

checkbox 或 radiobutton 表示 ( 同 组 ) 选 择 选项 的 个 数 。 

对 于 单 选 项 ,表示 选择 索引 的 值 。 

对 于 多 选项 ,inputValidator 控件 中 的 参数 min 和 max 表示 选择 选项 的 
最 小 值 和 最 大 值 。 

其 他 输入 值 表 示 字 符 的 长 度 





$. formValidator. retSetTipState 


function( 校 验 组 号 ) 表 示 把 该 组 的 提示 内 容 恢复 到 onshow 状态 





$. formValidator. reload AutoTip 





重新 定位 自动 构建 的 提示 层 


【 例 6-20】 完成 员工 信息 (姓名 , 工 号 ,手机 号 码 , E-mail) 的 添加 功能 , 要求 使 用 
formValidator 控件 来 校 验 用 户 输 入 数据 的 合法 性 。 实现 步骤 如 下 。 

(1) 创建 一 个 名 为 formValidatorTest 的 文件 夹 , 用 于 存放 资源 。 

(2) 将 下 载 的 formValidator 压缩 包 ( 本 例 采 用 formValidator-4. 0. 1 版 ) 解压 , 将 
images 和 style 文件 夹 及 下 级 所 有 文件 复制 到 新 建 的 formValidator 文件 夹 下 。 

(3) 将 formValidator-4. 0. 1. min. js 和 formValidatorRegex. js 文件 复制 到 formValidator 


交 件 来 下 。 


(4) 添加 一 个 名 为 formValidatorTest. html 的 HTML 文件 。 
(5) 打开 formValidatorTest. html 文件 ,添加 对 jQuery 和 formValidator 文件 的 引用 ， 


代码 如 下 : 


<script src="../Scripts/jQuery.min.js"></script> 
<link rel="stylesheet" type="text/css" href="formValidator/style/validator. 


css"> 


<script src="formValidator/formValidator-4.0.1.min.js"></script> 


<script src="formValidator/formValidatorRegex.js"></script> 


(6) 添加 校 验 控件 的 注册 代码 到 二 head 二 二 /head 二 标签 中 ,具体 如 下 : 


<script type= "text/javascript"> 


$().ready (function () { 


$.formValidator.initConfig({ 


formID: "forml", debug: false, submitOnce: true, 


onError: function (msg, obj, errorlist) { 


$("#errorlist") .empty (); 


$.map (errorlist, function (msg) { 


$("#errorlist") .append ("<1i>"+msg+"</1i>") 
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(7) 添加 信息 录入 表单 ,代码 如 下 : 





(8) 为 了 使 信息 录入 控件 与 消息 提示 框 在 同一 行 , 需 设置 它们 的 float 属性 为 left, 使 其 
左 向 漂浮 。 在 王 head 一 /header> 标 签 中 添加 样式 ,代码 如 下 : 


(9) 在 $.formValidator. initConfig 代码 后 添加 控件 校 验 代码 如 下 : 
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(10) 程序 的 运行 界面 如 图 6-17 所 示 。 不 在 控件 中 输入 任何 内 容 , 直 接 单 击 “ 提 交 ” 按 
钮 ,运行 界面 如 图 6-18 所 示 。 

















姓名 : 全 请 六 入 用 户 各 
工 号 : 加 请 入 TS 如 00186 
手机 号 码 : 则 请 绽 入 你 的 手机 号 码 ,可 以 为 宇 
E-mail: ee@ 加 请 各 入 各 箱 
图 6-17 信息 录入 界面 
姓名 : 四 49 驻 入 的 用 广 各 提 去 请 确认 
工 惑 ; 目 人 9 驴 入 的 工 三 间 法 请 确认 
手机 号 码 : 9 信 要 旺 进行 了 输入 ,必须 给 入 正确 
E-mail: ee 四 凶 箱 有 误 长 度 在 6~100 位 请 确认 ! 


图 6-18 表单 验证 结果 


6.3.2 日 期 控件 My97DatePicker 


My97DatePicker 是 一 款 基 于 jQuery 开发 的 日 期 选择 控件 , 它 支持 静态 限制 、 动 态 限 
制 、 脚 本 自 定义 限制 ,以 及 无 效 日 期 功能 ,利用 这 样 功能 可 以 任意 定制 不 能 选择 的 日 期 ， 
这 些 日 期 即使 毫 无 规律 、 毫 无 连续 性 ,也 可 以 通过 这 些 功能 的 组 合 轻松 搞定 。 它 具有 以 
下 功能 。 

1. 更 人 性 化 、 更 全 面 的 功能 

大 部 分 日 期 控件 都 具备 以 下 功能 ,如 带 时 间 显示 、 支 持 周 显示 、 自 定义 格式 、 自 动 纠 错 、 智 
能 纠 错 、 起 始 日 期 .操作 按钮 自 定义 ,快速 选 择 日 期 ,支持 多 种 调用 模式 等 .My97DatePicker 在 
这 些 方面 做 得 更 全 面 ,更 人 性 化 ,并 且 速 度 一 流 。 

2. 强大 的 日 期 范围 限制 功能 

可 以 自 定义 事件 并 有 丰富 的 API 库 。 

如 果 需 要 做 一 些 附加 的 操作 ,日 期 控件 自 带 的 自 定义 事件 可 以 满足 需求 。 此 外 ,还 可 以 
在 自 定义 事件 中 调用 系统 提供 的 API 库 来 做 更 多 的 运算 和 扩展 ,可 以 通过 很 少 的 代码 满足 
个 性 化 的 需求 。 

3. 多 语言 支持 和 自 定义 皮肤 支持 

通过 lang 属性 ,可 以 为 每 个 日 期 控件 单独 配置 语言 ,当然 也 可 以 通过 WdatePicker. js 
配置 全 局 的 语言 ,皮肤 也 一 样 ,只 要 配置 skin 属性 即 可 。 这 样 一 个 页 面 中 可 以 显示 多 种 语 
言 、 多 种 皮肤 的 日 期 控件 ,并且 它们 之 间 的 切换 可 以 不 刷新 页 面 。 

4. 跨 无 限 级 框架 显示 和 自动 选择 显示 位 置 

无 论 把 日 期 控件 放 在 哪里 ,都 不 需要 担心 会 被 外 层 的 iframe 所 遮挡 进而 影响 客户 的 体 
验 ,My97 日 期 控件 是 可 以 跨 无 限 级 框架 显示 的 ,并 且 当 控件 处 在 页 面 边界 时 , 它 会 自动 选 
择 显示 的 位 置 。 此 外 :还 可 以 使 用 position 参数 对 弹出 位 置 做 调整 。 
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My97DatePicker 插件 及 帮助 文档 的 下 载 地 址 为 http://www. my97. net/ , 例 6-21 将 演 


示 如 何 使 用 My97DatePicker 插件 。 


【 例 6-21】 单 击 文本 框 时 弹出 日 期 控件 ,使 用 户 可 以 从 日 期 控件 中 选择 日 期 。 

实现 步骤 如 下 : 

(1) 创建 一 个 名 为 DatePickerTest 的 文件 夹 , 用 于 存放 资源 。 

(2) 将 解压 后 的 My97DatePicker 文本 夹 复 制 DatePickerTest 文件 夹 下 。 

(3) 新 建 一 个 名 为 datePickTest. html 的 HTML 文件 ,在 一 head 二 一 /head 二 标签 中 引 





用 JQuery 文件 及 日 期 控件 ,代码 如 下 : 


<script type= "text/javascript" src="../Scripts/jQuery.min.js"></script> 
<script type="text/javascript" src="DatePickTest /My97DatePicker/WdatePicker.js"> 
</script> 


(4) 在 datePickTest. html 文件 的 一 body 二 二 /body 二 标签 中 添加 一 个 文本 框 , 代 码 


如 下 : 


<span> 出 生日 期 : < /span><input id="txtBirthDay" onclick="WdatePicker()" /> 


(5) 运行 datePickTest. html 文件 ,界面 如 图 6-19 所 示 。 


出 生日 期 : [2016-04-08 x 
4 mm 有 2016 Pw 
站 




















图 6-19 日 期 插件 程序 的 运行 结果 


6.4 ”综合 实例 


6.4.1 需求 描述 


创建 HTML 页 面 ,实现 员工 信息 的 录入 功能 ,员工 信息 包括 姓名 、 性 别 、 身 份 证 号 码 、 





基本 工资 和 工作 经 历 信息 (时 间 段 .公司 名 称 、 职 务 、 主 要 工作 及 职责 、 证 明 人 )。 
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综合 运用 jQuery 的 相关 知识 实现 如 下 需求 。 
(1) 时 间 段 应 引用 jQuery 日 期 插件 。 

(2) 可 以 实现 同时 录入 多 条 工作 经 历 信息 。 
(3) 可 以 对 工作 经 历 信息 进行 移 除 。 
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6.4.2 分 析 及 实现 


整个 页 面 分 为 2 块 区 域 ,员工 基本 信息 录入 区 域 和 工作 经 历 录 入 区 域 。 员 工 基 本 信息 
录 和 区 域 主要 用 于 放置 员工 基本 信息 的 录 和 人 控件 , 即 放置 姓名 、 性 别 . 身 份 证 和 基本 工资 等 
信息 的 录入 控件 ;工作 经 历 录 和 区域 则 用 于 放置 工作 经 历 的 相关 信息 录入 控件 , 即 放置 时 间 
段 、 公 司 名 称 、 职 务 、 主 要 工作 及 职责 、 证 明 人 等 信息 的 录入 控制 。 将 界面 布局 设置 如 图 6-20 
所 示 。 








A 
| 
i El 
区 二 == = 
图 6-20 员工 信息 录入 界面 


图 6-20 中 操作 列 的 “十 ”可 以 动态 地 添加 行 , 为 增加 新 的 工作 经 历 信 息 添加 控件 ;“X” 
可 以 删除 所 在 的 行 ,但 不 能 删除 第 1 行 。 

实现 步骤 如 下 : 

(1) 新 建 一 个 “jQuery 综合 实例 ”的 文件 夹 用 于 存放 资源 。 

(2) 新 建 一 个 名 为 "jQuery 综合 实例 . htm” 的 HTML 页 面 。 

(3) 打开 “jQuery 综合 实例 . html"* 页 面 ,在 二 head 二 /head 玫 中 引用 jQuery 库 文件 。 


(4) 在 二 head 二 /head 中 添加 学 生 基 本 信息 录入 控件 的 样式 表 如 下 : 
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(5) 在 王 body 之 一 /body> 中 添加 学 生 基 本 信息 录 和 人 表单 。 





(6) 运行 界面 如 图 6-21 所 示 。 


姓 外 [lt 由， @ 男 O 女 
身份 证 记 岩 本 IT 资 [ | 


图 6-21 学 生 基本 信息 录入 界面 
(7) 添加 工作 经 历 录入 控件 样式 。 





222 


第 6 章 jQuery 编程 








(8) 按 需 求 ,用 户 可 以 录入 多 条 工作 经 历 ,类 似 的 多 信息 录入 采用 table 标签 进行 布局 ， 
可 以 大 大 地 简化 实现 的 难度 ,在 二 body 二 二 /body 二 标签 内 添加 如 下 HTML 代码 。 





上 述 代码 中 的 *_1” 作 为 行 序 号 的 标识 ,代表 第 1 行 ;代码 块 onclick 二 "WdatePicker()" 
将 为 控件 注入 日 期 选择 功能 。 
(9) 程序 的 运行 结果 如 图 6-22 所 示 。 




















工作 经 历 
时 间 段 公司 名 称 职务 主要 工作 及 职责 证 明 人 操作 (十 ) 
a FT == 上 x 


6-22 员工 信息 详细 录入 界面 


(10) 当 用 户 单 击 图 6-22 中 的 “十 ”时 ,页面 将 自动 在 工作 经 历 列表 中 增加 一 行 工 作 经 
历 录入 控件 ,使 用 jQuery 的 append 方法 可 向 二 table 二 二 /table 二 标签 中 增加 行 , 代 码 
如 下 : 
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(11) 上 述 代码 已 实现 添加 工作 经 历 行 的 功能 。 当 然 也 可 以 移 除 行 中 的 控件 ,在 
addRow 方法 后 添加 添加 removeRow 方法 ,使 其 具备 根据 行 标识 移 除 行 标签 的 功能 ,代码 
如 下 : 





(12) 添加 日 期 控件 。 基 于 B/S 的 日 期 控件 需要 自 定义 控件 ,jQuery 联盟 提供 了 大 量 
开源 、 免 费 的 日 期 控件 ,可 以 从 http://JQueryui. com/ 下 载 得 到 。 本 书 采 用 的 
My97DatePicker 日 期 控件 可 以 从 http://www. my97. net/ 下 载 。 

(13) 将 下 载 的 整个 DatePicker 包 复 制 到 “jQuery 综合 实例 "文件 夹 中 ,再 在 “jQuery 综 
合 实例 . html” 文 件 的 jQuery 引用 后 添加 对 其 文件 的 引用 ,代码 如 下 : 


(14) 运行 界面 如 图 6-23 所 示 。 
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确定 
6-23 jQuery 综合 实例 程序 的 运行 结果 


本 章 小 结 


jQuery 是 基于 JavaScript 编制 而 成 的 应 用 程序 接口 (application programming 
interface,API) ,开发 者 可 以 以 很 少 的 代码 方便 、 快 捷 地 调用 这 些 应 用 程序 接口 完成 具体 功 
能 ,大 大 地 简化 了 JavaScript 的 应 用 复杂 性 。jQuery 是 一 个 开源 的 JavaScript API, 它 不 但 
提供 了 大 量 基 本 的 应 用 接口 ,还 允许 开发 者 对 其 进行 扩展 ,经 过 多 年 的 发 展 ,jQuery 拥有 大 
量 成 熟 的 第 三 方 控件 ,可 以 大 大 地 减少 开发 的 工作 量 ,节省 软件 开发 成 本 。 

本 章 详细 讲解 了 jQuery 在 开发 过 程 中 用 到 的 实用 功能 ,涵盖 了 选择 器 .事件 方法 、 动 
画 、DOM 操作 等 知识 点 。 本 章 以 * 实 用 、 够 用 "作为 基本 编写 思路 ,案例 简洁 易 懂 又 实用 , 讲 
解 过 程 中 辅 以 开发 场景 ,介绍 了 使 用 技巧 ,并 详细 阐述 了 分 析 及 设计 过 程 , 可 以 很 好 地 帮助 
学 习 者 理解 及 掌握 。 
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7.1 客户 端 请 求 技术 简介 


动态 网 页 并 不 是 指 在 页 面 上 具有 动画 功能 的 网 页 ,而 是 指 网 页 内 容 可 根据 不 同 的 业 
务 情 况 动态 变更 显示 内 容 的 网 页 ,一般 情 况 下 动态 网 页 除了 要 设计 网 页 外 ,还 要 通过 编 
写 业 务 处 理 程序 和 数据 库 来 使 网 页 具有 更 多 自动 的 和 高 级 的 功能 。 即 使 一 个 网 页 中 没 
有 动画 效果 ,但 是 实现 了 前 后 台 交 互 功 能 的 也 叫 作 动 态 网 页 。 程 序 是 否 在 服务 器 端 运 
行 , 是 动态 网 页 的 重要 标志 。 在 服务 器 端 运行 的 程序 、 网 页 、 组 件 属于 动态 网 页 ,它们 会 
随 不 同 客 户 、 不 同时 间 而 返回 不 同 的 网 页 ,例如 ASP、PHP、JSP、CGI 等 。 运 行 于 客户 端 
的 程序 、 网 页 插件、 组件 属 于 静态 网 页 ,例如 HTML 页 、Flash、JavaScript、VBScript 等 , 它 
们 是 永远 不 变 的 。 

在 最 开始 的 动态 网 站 开发 中 用 到 的 PHP、ASP、JSP, 都 是 将 HTML 代码 和 后 台 代 码 骨 
套 在 同一 个 页 面 之 中 形成 服务 器 端 动 态 页 面 。 对 于 业务 不 太 复 杂 的 网 站 来 说 ,这 种 开发 方 
式 简单 明快 。 然 而 业务 总 会 变 得 复杂 ,这 种 将 前 后 台 代码 嵌 套 在 一 起 的 方式 也 暴露 出 它 最 
大 的 整 端 就 是 代码 的 可 读 性 和 可 维护 性 变 得 越 来 越 差 ,往往 带 来 维护 成 本 的 大 量 增加 。 这 
个 时 候 如 何 让 前 后 端 更 合理 地 进行 分 工 , 如 何 提高 代码 的 可 维护 性 ,在 Web 开发 中 变 得 更 
重要 了 。 

这 之 后 越 来 越 多 的 Web 开发 环境 开始 支持 MVC(model view contorller) 的 设计 模型 ， 
为 开发 者 提供 了 全 套 的 开发 框架 ,也 出 现 了 各 种 各 样 的 Web 开发 框架 。 前 端 页 面 主要 负责 
显示 ,业务 逻辑 运行 在 服务 器 端 ,使 得 前 后 端 分 工 更 清晰 了 。 这 一 技术 变革 促进 了 Web 网 
站 的 大 发 展 ,大 量 的 网 站 被 开发 出 来 。 如 何 重用 其 他 已 经 开发 出 来 的 网 站 的 功能 ,构成 一 个 
强大 的 分 布 式 应 用 系统 ,在 Web Service 出 现 之 后 也 变 成 了 现实 。 

将 前 后 端 分 开 之 后 ,它们 之 间 的 通信 就 只 能 通过 HTTP 请 求 来 完成 。 但 是 这 样 的 程序 
在 用 户 每 次 和 后 台 交 互 的 过 程 中 ,都 要 等 待 服务 器 的 返回 才能 继续 往 下 操作 ,用户 体验 感 不 
如 桌面 程序 好 。 而 且 大 量 的 业务 程序 运行 在 服务 器 端 , 对 于 服务 器 和 网 络 带宽 都 是 不 小 的 
负担 。 

ajax 的 提出 ,让 人 们 看 到 了 网 页 在 不 等 到 服务 器 返回 的 时 候 , 也 可 以 继续 往 下 操作 ,网 
页 也 能 做 出 和 桌面 程序 一 样 的 体验 效果 ,这 让 人 们 将 目光 重新 汇聚 到 了 前 端 开 发 技术 上 。 
这 时 大 量 的 前 端 框架 开始 出 现 ,如 jQuery 等 。 在 这 些 框架 中 不 但 封装 了 前 端 页 面 的 显示 效 
果 , 也 封装 了 服务 器 的 交互 技术 。 








7.2 Web Service 简介 


在 日 常 的 系统 开发 中 可 能 会 遇 到 一 些 系统 设计 之 外 的 需求 ,比如 在 开发 某 旅游 平台 的 
时 候 , 用 户 需要 查询 目的 地 的 天 气 情况 来 安排 自己 的 行程 和 规划 自己 的 随身 衣物 等 ,这 样 的 
设计 使 系统 更 加 人 性 化 ,更 好 地 满足 用 户 的 需求 。 

首先 天 气 预 报 的 数据 是 实时 变化 的 ,需要 实时 收集 ,这 不 是 旅游 平台 的 主要 功能 ;其 次 
目的 地 数量 庞大 ,天 气 预报 的 数据 量 势必 也 会 很 庞大 。 所 以 在 设计 时 也 不 能 把 这 部 分 数据 
存 人 数据 库 中 ,程序 员 也 没有 必要 为 了 天 气 预报 开发 这 么 多 代码 ,就 算 真 的 开发 出 来 ,其 工 
作 量 可 能 大 于 旅游 平台 的 开发 。 但 是 天 气 预报 的 功能 在 旅游 平台 中 又 是 一 个 不 可 或 缺 的 
功能 。 

如 果 有 一 种 解决 方案 能 实现 传人 一 个 目的 地 名 称 , 就 能 返回 对 应 城市 的 天 气 预 报 的 实 
时 数据 ,将 为 旅游 平台 的 开发 提供 极 大 的 便利 ,而 且 其 访问 的 形式 就 像 访 问 某 个 天 气 预报 网 
站 一 样 便利 ,还 不 受 开发 语言 的 限制 ,提供 的 天 气 预 报 的 返回 结果 可 以 在 不 同 的 开发 语言 
解析 出 相同 的 天 气 预 报 结 果 , 这 就 是 Web Service 所 能 实现 的 功能 。 

Web Service 是 一 种 可 以 接收 从 互联 网 上 的 其 他 系统 中 传递 过 来 的 请 求 , 它 是 一 种 轻 
量 级 的 独立 的 通信 技术 , 它 使 运行 在 不 同 机 器 上 的 不 同 应 用 程序 无 须 借助 附加 的 、 专 门 的 第 
三 方 软件 或 硬件 ,就 可 相互 交换 数据 或 集成 ,所 以 它 是 一 个 平台 独立 的 、 低 耦合 的 . 自 包含 
的 、 基 于 可 编程 的 Web 的 应 用 程序 ,适用 于 开发 分 布 式 的 互 操作 的 应 用 程序 ,减少 了 应 用 程 
序 接口 的 花费 ,也 为 各 个 不 同系 统 的 集成 提供 了 一 个 通用 机 制 。Web Service 基于 一 些 常 
规 的 产业 标准 以 及 已 有 的 一 些 技术 , 它 使 用 开放 的 XML 标准 来 描述 ,发布 ,发 现 ,协调 和 配 
置 这 些 应 用 程序 ,通过 SOAP 在 Web 上 提供 软件 服务 ,使 用 WSDL 文件 进行 说 明 ,并 通过 
UDDI 进行 注册 。 

XML(extensible markup language, 扩 展 型 可 标记 语言 ) 面 向 短期 的 临时 数据 处 理 、 面 
向 万 维 网 络 , 是 SOAP 的 基础 。 

SOAP(simple object access protocol, 简 单 对 象 存 取 协议 ) 是 XML Web Service 的 通信 
协议 。 当 用 户 通过 UDDI 找到 某 个 在 线 服务 的 WSDL 描述 文档 后 ,就 可 以 通过 SOAP 来 调 
用 该 Web 服务 中 的 一 个 或 多 个 操作 。SOAP 是 XML 文档 形式 的 调用 方法 的 规范 , 它 可 以 
支持 不 同 的 底层 接口 .如 HTTP(S) 或 者 SMTP。 

WSDL(web services description language, 网 络 服务 描述 语言 ) 文 件 是 一 个 XML 文 
档 ,用 于 说 明 一 组 SOAP 消息 以 及 如 何 交换 这 些 消息 。 大 多 数 情况 下 由 软件 自动 生成 和 
使 用 。 

UDDICuniversal description discovery and integration ,通用 描述 发现 与 集成 ) 是 一 个 
主要 针对 Web 服务 供应 商 和 使 用 者 的 新 项 目 。 在 用 户 能 够 调用 Web 服务 之 前 ,必须 确定 
这 个 服务 内 包含 哪些 商务 方法 ,找到 被 调用 的 接口 定义 ,还 要 在 服务 端 来 编制 软件 。UDDI 
是 一 种 根据 描述 文档 来 引导 系统 查找 相应 服务 的 机 制 。UDDI 利用 SOAP 消息 机 制 (标准 
的 XML/HTTP) 来 发 布 、 编 辑 、 浏 览 以 及 查找 注册 信息 。 它 采用 XML 格式 来 封装 各 种 不 
同类 型 的 数据 ,并 且 发 送 到 注册 中 心 或 者 由 注册 中 心 来 返回 需要 的 数据 。 
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7.2.1 XML 文件 


XML 是 用 于 标记 电子 文件 ,使 其 具有 结构 性 的 标记 语言 。 它 可 以 用 来 标记 数据 、 定 义 
数据 类 型 ,是 一 种 允许 用 户 对 自己 的 标记 语言 进行 定义 的 源 语言 。 它 是 标准 通用 标记 语言 
(SGML) 的 子 集 ,非常 适合 Web 传输 。 它 提供 统一 的 方法 来 描述 和 交换 独立 于 应 用 程序 
或 供应 商 的 结构 化 数据 。 是 Internet 环境 中 路 平台 的 、 依 赖 于 内 容 的 技术 ,也 是 当今 处 理 分 
布 式 结构 信息 的 有 效 工 具 。 早 在 1998 年 2 月 ,W3C 就 发 布 了 XML 1. 0 规范 ,使 用 它 来 简 
化 因特网 的 文档 信息 传输 。 简 单 地 说 ,XML 就 是 一 种 平台 无 关 的 数据 的 描述 语言 ,因此 ， 
可 以 在 完全 不 同 的 系统 之 间 实 现 共享 数据 。 虽 然 它 是 语言 ,但 是 通常 情况 下 , 它 并 不 具备 常 
见 语言 (如 HTML) 的 基本 功能 一 一 被 计算 机 识别 并 运行 。 只 有 依靠 男 一 种 语言 解释 它 ,才能 
使 它 达到 你 想 要 的 效果 或 被 计算 机 所 接受 。 例 7-1 给 出 了 一 个 描述 天 气 预 报 的 XML 文件 。 

【 例 7-1】 天 气 预报 的 XML 文件 。 
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从 上 面 的 XML 清单 中 可 以 看 出 XML 文件 的 一 些 重 要 的 特征 。 

1. XML 声明 

与 定义 HTML 文件 等 其 他 标注 性 语言 一 样 ,在 定义 XML 文件 时 ,也 要 进行 声明 。 例 7-1 
中 的 第 1 行 给 出 了 XML 文件 的 定义 如 下 : 


<?xml version="1.0" encoding="UTF- 8"?> 


其 中 ,xml 是 XML 的 关键 字 , 是 XML 语言 中 保留 的 ,上 且 必 须 是 小 写 。 另 外 第 一 个 问号 
和 xml 关键 字 之 间 不 能 有 空格 。version 为 XML 文档 的 版 本 , 它 是 由 万 维 网 联盟 (W3C) 发 
布 的 。encoding 为 文档 编码 类 型 ,XML 文件 默认 采用 UTF-8 的 字符 编码 方案 。 

2. XML 元 素 

在 第 2 章 中 我 们 讲 到 在 HTML 语言 中 预先 定义 了 如 二 a> .二 hr 等 标签 ,它们 称 为 
HTML 的 元 素 , 且 每 个 标签 都 有 特殊 的 含义 和 功能 。 与 HTML 类 似 ,XML 文件 的 内 容 也 
是 定义 在 标签 之 内 的 ,它们 就 称 为 XML 的 元 素 。 如 例 7-1 中 的 第 2 行 开始 就 定义 了 很 多 的 
XML 元 素 。 如 cities \city、name 等 。 在 XML 文档 中 每 一 个 元 素 都 必须 要 有 对 应 的 结束 标 
记 才 被 认为 是 格式 正确 的 。 在 开始 标记 和 结束 标记 之 间 的 内 容 称 为 元 素 的 值 。 如 例 7-1 中 
的 第 4 行 定义 的 name 元 素 的 值 为 北京 ,如 下 所 示 。 


<name> 北 京 < /name> 


元 素 值 的 部 分 也 可 以 换 为 XML 元 素 , 该 元 素 就 是 子 元 素 , 这 就 实现 了 元 素 的 嵌 套 。 这 
点 和 HTML 的 元 素 嵌 套 也 是 类 似 的 。 如 例 7-1 中 的 第 7 一 11 行 ,如 下 所 示 。 


<weather id="today"> 
<date>2016 年 11 月 2 日 </date> 
<situation> 多 云 </situation> 
<temperature>0C/7C</temperature> 
</weather> 


weather 元 素 就 是 date ,situation、temperature 元 素 的 父 元 素 。 当 然 整体 来 看 例 7-1 也 
是 一 个 大 的 嵌 套 结构 ,读者 可 自行 去 分 析 其 中 的 元 素 嵌 套 过 程 。 

不 同 于 HTML 语言 ,在 XML 文件 中 允许 使 用 者 按照 自己 的 意愿 自由 地 为 XML 元 素 
命名 。W3C XML 1.0 规范 规定 元 素 必须 以 下 面 这 些 字符 打头 : 从 A 到 2Z, 或 者 从 a 到 z, 或 
者 以 “_” 打 头 。 也 就 是 说 大 小 写 的 英文 字符 或 者 下 划 线 。 如 在 例 7-1 中 定义 的 各 种 元 素 的 
名 称 。 

3. XML 属性 

在 HTML 中 可 以 为 元 素 定 义 属性 ,用 于 帮助 描述 元 素 ,如 超 链接 标签 “二 a 二 "需要 定 
义 “href” 属 性 才能 实现 超 链接 访问 。 同 样 的 ,在 XML 文件 中 也 可 以 为 元 素 定 义 属性 ,如 
例 7-1 中 的 第 3 行 和 第 7 行 都 为 city 元 素 定 义 了 id 属性 。 当 然 也 可 以 为 一 个 元 素 定义 多 个 
的 属性 ,甚至 可 以 将 子 元 素 的 值 也 定义 为 属性 ,用 来 减少 标签 的 数量 ,如 下 所 示 。 





<city id="023" name=" 重 庆 "> 
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正 是 因为 有 了 属性 , 才 可 以 在 一 个 标签 中 包含 两 个 以 上 标签 相同 但 属性 不 同 的 元 素 ,这 
点 类 似 于 在 数据 库 中 主键 的 值 不 能 重复 一 样 。 如 例 7-1 中 ,cities 元 素 中 包含 了 两 个 city 元 
素 , 在 一 个 city 元 素 中 包含 了 两 个 weather 元 素 。 其 中 属性 的 命名 也 有 严格 的 规则 ,必须 以 
从 A 到 Z, 或 者 从 a 到 z 打 头 。 也 就 是 说 以 大 小 写 的 英文 字符 打头 。 

4. XML 的 重要 原则 

为 了 保证 XMI] 文件 在 不 同 的 解释 器 和 应 用 程序 之 间 正 确 地 工作 :XML 文件 必须 严格 
地 遵守 几 条 基本 的 XML 原则 。 这 些 原则 如 下 : 

(1) 一 个 XML 文件 只 包含 一 个 根 元 素 。 

例 7-1 中 给 出 的 XML 文档 中 可 以 清晰 地 识别 出 文档 的 根 元 素 为 cities。 根 元 素 是 
XML 解析 器 解析 XML 文件 的 一 个 引用 点 ,一 个 XML 中 有 且 仅 有 一 个 根 元 素 。 如 果 将 一 
个 XML 文件 看 成 一 棵 树 , 根 元 素 就 是 这 棵 树 的 根 节点 ,而 其 他 的 子 元 素 就 是 这 棵 树 的 叶子 
节点 。 

(2) XML 元 素 必 须 有 个 结束 标记 。 

在 HTML 文件 中 类 似 于 "一 p>hello word" 这 样 没有 关闭 的 标记 可 以 被 浏览 器 正确 地 
解释 执行 ,但 是 在 XML 文件 中 这 是 不 允许 的 。 如 果 某 个 标记 没有 被 关闭 ,解析 器 会 报 出 找 
不 到 结束 标记 的 错误 。 在 XML 文件 中 有 两 种 关闭 标记 的 方法 。 

第 一 种 是 用 “/” 加 上 元 素 名 进行 关闭 ,如 例 7-1 中 第 4 行 的 一 /name> 。 

第 二 种 是 对 于 那 种 没有 包含 数据 或 者 只 含有 属性 的 元 素 可 以 自 关闭 ,如 例 7-1 中 第 
20 行 的 一 describe/ 二 ,这 种 方式 比 二 describe 二 一 /describe 二 更 简洁 。 

(3) XML 元 素 的 属性 都 必须 用 引号 括 起 来 。 

对 于 例 7-1 中 的 第 3 行 ctiy 元 素 的 id 属性 ,必须 要 用 引号 扩展 起 来 ,这 样 解析 器 才能 正 
确 地 解析 XML 文件。 

(4) XML 元 素 可 以 包含 子 元 素 , 但 是 子 元 素 必 须 正确 地 组 套 。 

例 7-1 的 第 3 一 17 行 和 第 18 一 31 行 中 都 给 出 了 北京 和 重庆 的 天 气 预 报信 息 , 它 们 的 元 
素 内 容 是 一 样 的 ,从 中 也 可 以 看 出 元 素 是 可 以 嵌 套 子 元 素 的 。 在 城市 中 典 套 了 城市 的 名 称 
和 描述 ,以 及 今明 两 天 的 天 气 情况 。 在 天 气 情况 的 描述 也 往 下 可 以 符 套 多 个 层次 。 但 是 注 
意 在 一 层 幅 套 没 有 完成 之 前 不 要 引入 下 一 层 的 元 素 。 

(5) XML 元 素 对 于 大 小 写 是 敏感 的 。 

在 HTML 中 ,浏览 器 对 标签 的 大 小 写 不 敏感 。 但 是 在 XML 文件 中 ,如 果 将 例 7-1 的 
第 4 行 改 为 “<name> 北 京王 Name 之 ”,XML 文件 解析 器 会 产生 一 条 “结束 标签 Name 不 
匹配 开始 标签 name” 的 错误 。 


7.2.2 Web Service 原理 


Web Service 的 三 大 要 素 为 SOAP、.WSDL 和 UDDI。 其 中 SOAP 用 来 描述 传递 信息 的 
格式 ,WSDL 用 来 描述 如 何 访问 具体 的 接口 ,UDDI 用 来 管理 分发. 查询。 简单 地 讲 , Web 
服务 是 一 个 URL 资源 ,客户 端 可 以 通过 编程 方式 请 求 得 到 它 的 服务 ,而 不 需要 知道 所 请 求 
的 服务 是 怎样 实现 的 ,这 一 点 与 传统 的 分 布 式 组 件 对 象 模 型 是 不 相同 的 。Web 服务 的 体系 
结构 是 基于 Web 服务 提供 者 、Web 服务 请 求 者 .Web 服务 注册 中 心 三 个 角色 和 发 布 .发 现 、 
绑 定 三 个 动作 构建 的 。 也 就 是 说 Web 服务 提供 者 就 是 Web 服务 的 拥有 者 , 它 耐心 等 待 为 
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其 他 服务 和 用 户 提 供 自己 已 有 的 功能 ; Web 服务 请 求 者 就 是 Web 服务 功能 的 使 用 者 , 它 利 
用 SOAP 消息 向 Web 服务 提供 者 发 送 请 求 以 获得 服务 ;Web 服务 中 介 者 的 作用 是 把 一 个 
Web 服务 请 求 者 与 合适 的 Web 服务 提供 者 联系 在 一 起 , 它 充当 管理 者 的 角色 ,一 般 是 
UDDI。 这 三 个 角色 是 根据 逻辑 关系 划分 的 ,在 实际 应 用 中 ,角色 之 间 很 可 能 有 交叉 : 一 个 
Web 服务 既 可 以 是 Web 服务 提供 者 ,也 可 以 是 Web 服务 请 求 者 ,或 者 两 者 兼 而 有 之 。 图 7-1 


显示 了 Web 服务 角色 之 间 的 关系 。 








UDDI 服务 注册 中 心 UDDI 
WSDL 
> 
服务 提供 者 服务 请 求 者 
SOAP 


图 7-1 Web Service 架构 流程 图 


由 图 7-1 可 以 看 出 ,实现 一 个 完整 的 Web 服务 包括 以 下 步 又 。 

(1) Web 服务 提供 者 设计 实现 Web 服务 ,将 调试 正确 后 的 Web 服务 通过 Web 服务 中 
介 者 发 布 ,并 在 UDDI 注册 中 心 注册 ,这 个 过 程 也 称 为 发 布 的 过 程 。 

(2) Web 服务 请 求 者 向 Web 服务 注册 中 心 请 求 特定 的 服务 ,注册 中 心 根据 请 求 查询 
UDDI 注册 中 心 ,为 请 求 者 寻找 满足 请 求 的 服务 。 

(3) Web 服务 注册 中 心 向 Web 服务 请 求 者 返回 满足 条 件 的 Web 服务 描述 信息 ,该 描 
述 信 息 用 WSDL 写成 ,各 种 支持 Web 服务 的 客户 端 都 能 阅读 。 

(4) 利用 从 Web 服务 中 介 者 返回 的 描述 信息 生成 相应 的 SOAP 消息 ,发送 给 Web 服 
务 提供 者 ,以 实现 Web 服务 的 调用 。 

(5) Web 服务 提供 者 按 SOAP 消息 执行 相应 的 Web 服务 ,并 将 服务 结果 返回 给 Web 
服务 请 求 者 。 

1. WSDL 文档 

WSDL 也 就 是 Web 服务 描述 语言 ,是 基于 XML 的 用 于 描述 Web 服务 以 及 如 何 访 问 
Web 服务 的 语言 。 它 是 一 种 使 用 XML 编写 的 文档 。 这 种 文档 可 描述 某 个 Web Service。 
它 可 规定 服务 的 位 置 ,以 及 此 服务 提供 的 操作 (或 方法 )。 简 单 地 说 , 它 仅 仅 是 一 个 简单 的 
XML 文档 。 一 个 WSDL 文档 通常 包含 有 以 下 元 素 , 即 types、message、 portType、 
operation binding 、service port 元素 。 这 些 元 素 舱 套 在 definitions 元 素 中 ,该 元 素 封 装 了 
整个 文档 ,同时 通过 其 targetNamespace 命名 空间 提供 了 一 个 WSDL 文档 。 除 了 提供 一 个 
命名 空间 外 ,该 元 素 没 有 其 他 作用 , 故 不 作 详细 描述 。 详 细 的 结构 如 下 所 示 。 
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(1) types: WSDL 采用 了 W3C XML 模式 内 置 类 型 作为 其 基本 类 型 系统 。 它 用 作 一 
个 容器 ,用 于 定义 XML 模式 内 置 类 型 中 没有 描述 的 各 种 数据 类 型 。 如 下 是 中 国 气象 局 天 气 
预报 Web Service 接口 (http://www. webxml. com. cn/ WebServices/ WeatherWebService. 
asmx?wsdl, 该 站 点 的 数据 2. 5 小 时 左右 自动 更 新 一 次 ,包括 340 多 个 中 国 主 要 城市 和 
60 多 个 国外 主要 城市 三 日 内 的 天 气 预报 数据 ) 的 取得 支持 城市 的 type 定义 ,具体 定义 如 下 
所 示 。 





此 段 定义 描述 了 getSupportCity 方法 的 传人 参数 的 参数 名 称 为 byProvinceName 且 类 
型 为 字符 串 类 型 ; 它 的 响应 信息 为 getSupportCityResponse, 名称 为 getSupportCityResult 
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且 类 型 为 自 定 义 的 ArrayOfString 类 型 。 定 义 的 最 后 对 ArrayOfString 进行 了 详细 的 说 明 。 

(2) message: 描述 通信 消息 的 数据 结构 的 抽象 类 型 化 定义 ,使 用 types 描述 的 类 型 来 
定义 输出 或 者 接受 消息 的 数据 结构 , 它 的 定义 如 下 所 示 。 








(3) portType 和 operation: 描述 服务 和 服务 的 方法 。operation 的 输入 和 输出 直接 引 
用 message 的 描述 。 也 就 是 说 它 定 义 了 Web 服务 的 抽象 接口 。 该 接口 类 似 编 程 语言 中 的 
接口 ,都 是 只 定义 了 一 个 抽象 方法 ,没有 定义 实现 。 一 个 portType 中 可 以 定义 多 个 
operation ,一 个 operation 可 以 看 作 一 个 方法 , 它 的 定义 如 下 所 示 。 





(4) binding: 描述 Web Services 的 通信 协议 , 它 将 一 个 抽象 portType 映射 到 一 组 具体 
协议 (SOAP 和 HTTP) 消息 传递 样式 .编码 样式 中 ,通常 与 协议 专 有 的 元 素 和 在 一 起 使 
用 。 它 还 要 描述 Web Services 的 方法 以 及 输入 和 输出 , 它 的 定义 如 下 所 示 。 
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上 面 的 定义 中 将 服务 访问 点 与 SOAP/HTTP 协议 进行 了 绑 定 , 且 定义 了 在 具体 SOAP 
调用 时 应 当 使 用 的 soapAction 是 getSupportCity 函数 。 
(5) service 和 port: 描述 Web Services 访问 点 的 集合 。 一 个 service 元 素 可 以 包含 一 
个 或 者 多 个 port 元 素 ,其 中 每 个 port 元 素 表 示 一 个 不 同 的 Web 服务 。port 元 素 将 URL 赋 
一 个 特定 的 binding ,甚至 可 以 使 两 个 或 者 多 个 port 元 素 将 不 同 的 URL 赋值 给 相同 的 
binding。 因 为 包括 SOAP 1.1 和 SOAP 1.2 的 描述 ,所 以 一 个 方法 有 对 应 的 两 种 描述 ,如 下 
所 示 。 


<wsdl:service name="WeatherWebService"> 

<wsdl :port name= "WeatherWebServiceSoap" binding= "tns:WeatherWebServiceSoap"> 

<soap:address location="http://www.webxml .com.cn/ 
WebServices/WeatherWebService.asmx"/> 

</wsdl:port> 

<wsdl:port name="WeatherWebServiceSoapl2" 

binding="tns:WeatherWebServiceSoapl2"> 
<soapl2:address location= "http://www.webxml.com.cn/ 

WebServices/WeatherWebService.asmx"/> 


</wsdl:port> 


WSDL 文档 是 在 发 布 Web Service 程序 的 时 候 自动 生成 的 。 在 日 常 使 用 中 要 会 阅读 
它 , 这 样 在 调用 时 才能 知道 如 何 正 确 地 去 使 用 已 经 提供 的 服务 。 

2. SOAP 协议 

SOAP 也 就 是 简单 对 象 访问 协议 ,是 用 于 应 用 程序 之 间 进 行 通信 的 一 种 通信 协议 ,是 一 
种 轻 量 的 、 简 单 的 .基于 XML 的 协议 , 它 被 设计 成 在 Web 上 交换 结构 化 的 和 固化 的 信息 。 
它 是 一 种 用 于 访问 Web 服务 的 协议 。SOAP 基于 XML 和 HTTP, 通 过 XML 来 实现 消息 
描述 ,然后 再 通过 HTTP 实现 消息 传输 。 正 是 因为 它 基 于 XML 和 HTTP, 所 以 其 独立 于 
语言 .独立 于 平台 .并且 因为 XML 的 扩展 性 很 好 ,所 以 基于 XML 的 SOAP 扩展 性 也 很 好 。 

3. UDDI 

UDDI 是 统一 描述 发现 和 集成 的 缩写 。 它 是 一 个 基于 XML 的 跨 平台 的 描述 规范 ,可 
以 使 世界 范围 内 的 企业 在 互联 网 上 发 布 自己 所 提供 的 服务 。 它 使 企业 在 互联 网 上 可 以 互相 
发 现 并 且 定 义 业 务 之 间 的 交互 。 它 是 核心 的 Web 服务 标准 之 一 。 它 通过 SOAP 进行 消息 
传输 ,用 WSDL 描述 Web 服务 及 其 接口 的 使 用 ,主要 用 来 注册 和 查找 服务 ,提供 一 种 发 布 
和 查找 服务 描述 的 方法 。 


7.2.3 Web Service 的 调用 


现在 有 很 多 的 Web Service 已 经 被 开发 出 来 , 供 大 家 使 用 ,比如 在 7.2. 1 小节 中 提 到 的 
天 气 预 报 的 Web Service。 本 节 用 Java 语言 和 C# 语 言 来 分 别 说 明 在 Web 服务 器 端 程序 中 
如 何 调用 这 个 天 气 预 报 服务 。 

1. 在 Java 中 调用 Web Service 

【 例 7-2】 Java 中 调用 Web Service。 

(1) 下 载 相 应 的 Axis2 插件 的 相关 Jar 包 ( 见 图 7-2)。 
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下 载 地 址 为 : http://axis. apache. org/axis2/java/core/download. html。 











AnszuvA Releases 
se The current release 上 1.7.4 and was published on October 21, 2016. The release note for this release can be found here. 
The following distributions are available for download: 
161 Link Checksums and signatures 
‘ Binary distnbution axs2.174bmzp 国 MD5 量 SHA1 重 PGP 量 
164 Source distribution axis2.17 4srczp 国 MD5 二 SHA1 号 PGP 全 
Bei WAR distrbution as2.17 4warzp 国 MD5 量 SHA1 量 PGP 量 
二 EE TREE 
173 Code Generator plugin for Eclipse axs2-echpse codegen-pluon-174zp 国 MD5 量 SHA1 量 PGP 全 
ee Axis2 plugin for Intelly IDEA axs2idea-plugin-174zp 图 MD5 时 SHA1 量 PGP 全 





7-2 ”Axis 插件 的 下 载 


下 载 WAR distribution 和 Code Generator plugin for Eclipse 两 个 包 。 其 中 WAR 
distribution 中 包含 的 是 Java Web Service 的 支持 类 的 包 文 件 。Code Generator plugin for 
Eclipse 是 Eclipse 的 Web Service 的 插件 。 

(2) 安装 Eclipse 的 Web Service 插件 。 

解压 Code Generator plugin for Eclipse 包 , 将 解压 后 plugins 文件 夹 的 文件 复制 到 
Eclipse 安装 目录 的 plugins 文件 夹 下 。 重 启 Eclipse, 在 File>New 一 Other... 命 令 打 开 的 对 
话 框 中 能 找到 Axis2 Wizards 目录 ,如 图 7-3 所 示 。 





圈 New 口 x 


saa 一 


Wizards: 
type fiter text 


@ class 
@ Interface 
仿 Java Project 
需 Java Project from Existing Ant Buildfile 
区 Plug-in Project 
> BE General 
v BE Axis2 Wizards 
2 Auisz Code Generator 
> > Connection Profiles 
Y ® Database Web Sevices 














Em > 














@ 上 EN | HE | < |] 





7-3 Web Service 插件 


(3) 生成 Web Service 客户 端 代码 。 
单 击 图 7-3 中 的 Next 按钮 ,进入 代码 生成 界面 ,如 图 7-4 所 示 。 
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圈 Axisz Codegen Wizard 


Select the wizard 
Welcome to the Axis2 code generator wizard. 





Please specify what you want to do. 
图 Generate java source code from a WSDL file 
O 〇 Generate a WSDL from a Java source file 


Hint : You can generate java code from a WSDL or WSDL from a Java source file. 























图 7-4 生成 Web Service 客户 端 代码 


此 处 是 调用 已 有 的 Web Service 接口 ,所 以 选择 根据 已 有 的 WSDL 文件 生成 Java 代 
码 , 即 第 一 个 选项 。 单 击 Next 按钮 ,输入 天 气 预 报 Web Service 的 WSDL 地 址 “http:// 
ws. webxml. com. cn/ WebServices/ WeatherWS. asmx?wsdl”, 如 图 7-5 所 示 。 单 击 Next 按 
钮 进入 之 后 的 界面 ,为 生成 的 代码 选择 一 个 合适 保存 路 径 。 


圈 Axisz Codegen Wizard 


WSDL selection page 
Please Select the WSDL file location 








WSsDL file location : [webxml.com.cn/WebServices/WeatherWS.asmx?w] |Browse-| 





Hint : You can select only "wsdl/"xml file location 








7-5 输入 WSDL 地 址 


(4) 新 建 一 个 Java 工程 ,并 将 生成 完 的 代码 导入 新 建 的 工程 中 .再 将 第 (1) 步 中 下 载 的 
“WAR distribution” 的 Jar 包 也 导入 工程 中 。 项 目 结构 如 图 7-6 所 示 。 
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~ SH weatherForecast 
vBsrc 
》 遍 cncom.webxml 
v 志 Webserviclnvok 
> 
> Bh JRE System Library [idk1.8.0 91] 
>》 三 Referenced Libraries 


图 7-6 Java 项 目 结构 


(5) 编写 如 下 代码 。 





(6) 程序 运行 后 得 到 天 气 预报 的 结果 ( 见 图 7-7)。 

2. 在 C# 中 调用 Web Service 

【 例 7-3】 C# 中 调用 Web Service。 

(1) 在 Visual Studio 中 创建 名 为 WeatherForecast 的 控制 台 工程 ,目录 结构 如 图 7-8 


所 示 。 
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EE] wea 
4 £ Properties 
光 六 中 站 这 bp 电 Datasources 
792 cs Assemblyinfo.cs 
2016/11/15 14:28:05 从 Settings.settings 
信和 部 站 :40 和 风 巾 /风力 : 南 风 级， 湿度 ; ze a 
紫外 绪 强度 : 中 等 。 空 气质 量 : 
条 外 续 扯 是 ;中 笃 ” 案 拔 避 是 二)。、aa。 防 呆 护 肤 品 。 三 Service References 
. + 名和， 无 十 生 风 力 较 小 ， 易 保持 清洁 度 。 2 
汉 芭 掉 站 ; 权 亲 起， 蕉 二 进行 共 种 生 风 过 他 App<config 
本， A 
图 7-7 天 气 预报 结果 图 7-8 C 间 项 目 结构 





(2) 右 击 解决 方案 ,在 弹出 菜单 中 选择 "添加 ”一 “服务 引用 ”, 在 弹出 的 “添加 服务 引用 ” 界 
面 中 单 击 “ 高 级 (V)... "按钮 ,再 弹出 的 “服务 引用 设置 "界面 中 单 击 “ 添 加 Web 引用 (CW)...” 
按钮 ,在 弹出 的 “添加 Web 引用 ”界面 中 进行 如 图 7-9 所 示 的 设置 ,URL 地 址 为 http:// 
www. webxml. com. cn/ WebServices/ WeatherWebService. asmx, 设 置 完成 后 , 单 击 “ 确 定 ” 








按钮 。 
添加 Web 引用 7 


请 定位 到 提供 Web 服务 的 URL ,然后 单 击 "添加 引用 ”, 添加 位 于 该 URL 上 的 所 有 可 用 服务 。 
o@lx*xon 


URL(U): | http://www.webxml.com.cn/WebServices/WeatherWebSevicez v| ey 


位 于 此 URL 上 的 Web 服务 (S): 
WeatherWebService 人 1 


WebXml.com.cn 天 气 预报 Web 服务 ， 数据 每 2.5 小 时 左右 自动 更 新 一 次 ， 准 确 可 

地。 包括 340 多 个 中 国 主要 城市 和 60 多 个 国外 主要 城市 三 日 内 的 天 气 预报 数据 。 

此 天 气 预报 Web Services 请 不 要 用 于 任何 商业 目的 。 若 有 需要 请 孔 系 我 们 ， 区 迎 技术 

交流 。 QQ: 8409035 | 

Fn WEB 服务 请 注 明 或 链接 相知: http:/ /www.webxml.com.cn/ 感谢 大 家 | 
| 





Web 引用 各 (N): 
WeatherService 
支持 下 列 控 作 ， 有 关 正 式 定义 ， 湾 查 知 服 务 说 明 





» getSupportCity 
查询 本 天 气 预 报 Web Services 支 持 的 国内 外 城市 或 地 区 信息 


输入 参数 ，byProvinceName = 推定 的 简 到 国内 的 省 份 ， 和 为 ALL 芝 空 则 表示 回回 全 
茵 起 市， 返回 数 蚀 : 一 个 一 从 字符 弟 数 授 String()， 统 构 为 ， 城市 匀称 (入 市 代 而 ). 


» getSupportDataset 
获得 本 天 气 预报 Web Services 支 持 的 洲 、 国 内 外 省 份 和 城市 信息 ba 
< > 














7-9 添加 Web 引用 
(3) 在 Program. cs 文件 中 编写 如 下 代码 。 
namespace WeatherForecast 


{ 


class Program 
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static void Main(string[] args) 
// 实 例 化 WeatherWebservice 
WeatherService.WeatherWebService ws=new WeatherService. 
WeatherWebService() 
// 取 得 天 气 预报 信息 
IList<string>forecastInfo=ws.getWeatherbyCityName ("重庆 "); 
// 输 出 结果 
foreach (var info in forecastInfo) 
{ 
Console.WriteLine (info); 
} 
Console.ReadKey (); 


} 


(4) 程序 运行 后 得 到 天 气 预报 的 结果 ,如 图 7-10 所 示 





-=| 


四 CNWindows\system32\cmd.exe 















图 7-10 ”天气 预报 


7.3 HTTP 请 求 


HTTP(hypertext transfer protocol, 超 文本 传输 协议 ) 是 一 套 i 
的 规则 ,该 协议 用 来 传输 网 页 .图像 以 及 因特网 上 在 浏览 器 与 服务 器 
他 类 型 文件 。 

HTTP 工作 于 客户 端 一 服务 端 架 构 之 上 。 浏 览 器 作为 HTTP 客户 端 通过 URL 向 
HTTP 服务 端 即 Web 服务 器 发 送 所 有 请 求 。Web 服务 器 有 Apache 服务 器 IIS 服务 器 
(Internet information services) 等 。Web 服务 器 根据 接收 到 的 请 求 向 客户 端 发 送 响 应 信息 。 
HTTP 默认 端口 号 为 80 ,但 是 也 可 以 改 为 8080 或 者 其 他 端口 。 


算 机 通过 网 络 进行 通信 
之 间 知 道 如 何 处 理 的 其 
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HTTP 是 一 种 无 状态 的 协议 ,无 状态 是 指 Web 浏览 器 和 Web 服务 器 之 间 不 需要 建立 
持久 的 连接 ,这 意味 着 当 一 个 客户 端 向 服务 器 端 发 出 请 求 (request) ,然后 Web 服务 器 返回 
响应 (response) ,连接 就 被 关闭 了 ,在 服务 器 端 不 保留 连接 的 有 关 信 息 。HTTP 遵循 请 求 
(request)/ 应 答 (response) 模 型 。Web 浏览 器 向 Web 服务 器 发 送 请 求 , Web 服务 器 处 理 请 
求 并 返回 适当 的 应 答 。 所 有 HTTP 连接 都 被 构造 成 一 套 请 求 和 应 答 。 

7.3.1 _ HTTP 通信 机 制 

HTTP 通信 机 制 是 在 一 次 完整 的 HTTP 通信 过 程 中 得 以 运用 , Web 浏览 器 与 Web 服 
务 器 之 间 将 完成 下 列 4 个 步骤 。 

1. 建立 TCP 连接 

在 HTTP 工作 开始 之 前 ,Web 浏览 器 首先 要 通过 网 络 与 Web 服务 器 建立 连接 ,首先 要 
进行 域名 的 解析 ,解析 完成 之 后 ,得 到 了 服务 器 的 IP 地 址 ,再 建立 连接 。 该 连接 是 通过 
TCP 来 完成 的 ,TCP 协议 与 IP 协议 共同 构建 成 Internet, 即 TCP/IP 协议 族 , 因 此 Internet 
又 被 称 作 TCP/IP 网 络 。HTTP 是 比 TCP 更 高 层次 的 应 用 层 协议 ,根据 规则 ,只 有 低层 协 
议 建 立 之 后 才能 进行 更 高 层 协议 的 连接 ,如 图 7-11 所 示 。 






























































客户 端 服务 器 

HTTP 协 议 
HTTP 客 户 端 一 La 一 HTTP 客户 端 

TCP 协 议 

TCP = 一 | TCP 
IP 协 议 

IP IP 
以 太 

网 络 时 网 络 






































图 7-11 建立 TCP 连接 


2. 发 起 HTTP 请 求 
一 旦 建立 了 TCP 连接 ,Web 浏览 器 就 可 以 向 Web 服务 器 发 送 HTTP 请 求 。HTTP 
请 求 信息 就 是 一 个 数据 块 ,如 下 所 示 。 


POST /login.jsp HTTP/1.1 

Accept:image/gif.image/jpeg, * /* 
Accept-Language:zh-cn 

Accept-Encoding: gzip, deflate 

Connection:Keep-Alive 

Host:localhost 
User-Agent:Mozila/4.0(compatible;MSIE5.01;Window NT5.0) 


username=user0l1 spassword=1234 


从 以 上 定义 中 可 以 看 出 ,HTTP 请 求 信息 由 请 求 头 和 请 求 数 据 两 部 分 组 成 。 应 特别 注 
意 的 是 ,这 两 部 分 之 间 必 须要 用 有 一 个 空 行 , 用 于 通知 服务 器 该 行 以 下 部 分 是 请 求 数据 。 
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HTTP 请 求 头 包含 请 求 行 和 请 求 报头 ,以 上 定义 的 第 1 行 就 是 请 求 行 , 该 行 由 请 求 方 
法 字段 .URL 字段 和 HTTP 协议 版 本 字段 3 个 字段 组 成 ,它们 用 空格 分 隔 。 以 上 定义 的 第 
1 行 的 意思 就 是 使 用 HTTP 1.1 的 协议 ,采用 POST 的 方法 访问 登录 页 面 。 其 中 GET 和 
POST 方法 是 最 常见 的 请 求 方法 。 

使 用 GET 方法 ,请 求 参 数 和 对 应 的 值 附加 在 URL 后 面 ,利用 一 个 问号 (“?”) 代 表 
URL 的 结尾 与 请 求 参数 的 开始 ,参数 之 间 用 ”*& "符号 分 隔 , 一 般 情况 下 使 用 了 这 种 请 求 方 
式 后 ,就 不 需要 请 求 数 据 部 分 了 。 由 于 是 采取 在 URL 地 址 后 附加 参数 的 形式 ,所 以 传递 的 
参数 长 度 是 受 限制 的 , 且 是 明码 的 传递 ,安全 性 不 高 ,常用 于 一 些 不 涉及 系统 安全 的 情况 。 
如 果 以 上 定义 的 HTTP 请 求 改 成 GET 的 请 求 方式 ,请 求 行 应 该 改 为 如 下 的 定义 。 


GET/login.jsp?username=user0l&password=1234 HTTP/1.1 


使 用 POST 方法 ,可 以 允许 客户 端 给 服务 器 提供 较 多 信息 。POST 方法 将 请 求 参 数 封 
装 在 HTTP 请 求 数据 中 (以 上 定义 的 第 9 行 ) ,以 名 称 / 值 的 形式 出 现 (数据 之 间 也 是 使 用 
“&.” 符 号 分 隔 ) ,可 以 传输 大 量 数据 ,这 样 POST 方式 对 传送 的 数据 大 小 没有 限制 ,而 且 也 
不 会 显示 在 URL 中 。 为 提高 传输 的 数据 长 度 和 安全 性 ,通常 在 表单 提交 时 采用 POST 
方法 。 

请 求 头 部 (以 上 定义 的 第 2 一 7 行 ), 由 关键 字 / 值 对 组 成 ,每 行 一 对 ,关键 字 和 值 用 英文 
冒号 “:” 分 隔 。 请 求 头 部 通知 服务 器 有 关 客 户 端 请 求 的 信息 ,一 些 典 型 的 参数 如 表 7-1 
所 示 。 

表 7-1 常见 的 HTTP 请 求 头 




















状 态 码 说 明 
Accept 客户 端 可 识别 的 内 容 类 型 列表 
Accept-Language 指定 一 种 自然 语言 
Accept-Encoding 指定 可 接受 的 内 容 编 码 
Connection 当前 连接 是 否 保持 
Host 请 求 的 主机 名 ,允许 多 个 域名 同 处 一 个 IP 地 址 , 即 虚 拟 主机 


3. 响应 HTTP 请 求 

当 Web 服务 器 接收 到 Web 浏览 器 的 请 求 后 , Web 服务 器 就 会 根据 请 求 做 相应 的 动作 并 
将 结果 返回 给 Web 浏览 器 ,正如 客户 端 会 随同 请 求 发 送 关 于 自身 的 信息 一 样 ,服务 器 也 会 向 
Web 浏览 器 发 送 关 于 它 自己 的 数据 及 被 请 求 的 文档 。 如 下 给 出 了 HTTP 响应 的 示例 。 


HTTP/1.1 200 OK 

Server:Apache Tomcat/5.0.12 
Date:Mon, 60ct2003 13:23:42 GMT 
Content-Length:112 


<html> 
<head> 
<title> 订 和 餐 系 统 < /title> 
</head> 
<body> 
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<!-- 欢 迎 登 录 订 餐 管理 -> 
</body> 
</html> 











以 上 定义 可 以 看 出 ,HTTP 响应 信息 也 是 由 两 部 分 构成 , 即 响应 头 和 响应 数据 。 它 
们 之 间 也 是 采用 与 请 求 信 息 一 样 的 空 行 来 分 隔 。 对 比 请 求 和 响应 的 定义 ,会 发 现 它 们 真正 
的 区 别 在 于 响应 中 的 第 一 行 用 状态 信息 代替 了 请 求 信息 。 

HTTP 响应 头 包含 状态 行 和 响应 报头 ,以 上 定义 的 第 1 行 就 是 状态 行 ,该 行 由 服务 器 
HTTP 协议 的 版 本 字段 .服务 器 发 回 的 响应 状态 代码 字段 .状态 代码 的 文本 描述 字段 3 个 
字段 组 成 ,它们 之 间 也 用 空格 分 隔 。 以 上 定义 的 第 1 行 的 意思 就 是 服务 器 使 用 HTTP 1.1 
协议 返回 的 响应 代码 为 200, 并 成 功 (OK) 处 理 了 用 户 请 求 的 响应 信息 。 响 应 状态 代码 由 三 
位 数字 组 成 ,第 一 个 数字 定义 了 响应 的 类 别 , 有 五 种 类 别 ,如 表 7-2 所 示 。 


表 7-2 HTTP 响应 码 的 类 别 





























状态 码 说 明 

1xx 指示 信息 : 表示 请 求 已 接收 ,并 会 继续 处 理 

2X X 成 功 : 表示 请 求 已 被 成 功 接收 、 理 解 、 接 受 
3XX 重 定向 : 要 完成 请 求 ,必须 进行 更 进一步 的 操作 
4XX 客户 端 错误 : 请 求 有 语法 错误 或 请 求 无 法 实现 
5X x 服务 器 端 错误 : 服务 器 未 能 实现 合法 的 请 求 





每 个 类 型 的 状态 码 都 对 应 很 多 的 具体 状态 ,比较 常用 的 如 表 7-3 所 示 。 
表 7-3 常见 的 HTTP 响应 码 




















状态 码 描 述 说 明 
200 OK 客户 端 请 求 成 功 
400 Bad Request 客户 端 请 求 有 语法 错误 ,不 能 被 服务 器 所 理解 
404 Not Found 请 求 资源 不 存在 。 举 个 例子 : 输入 了 错误 的 URL 
500 Internal Server Error 服务 器 发 生 不 可 预期 的 错误 


响应 报头 (响应 定义 的 第 2 一 4 行 ), 也 是 由 关键 字 / 值 对 组 成 ,每 行 一 对 ,关键 字 和 值 也 
用 英文 冒号 ": ”分 隔 。 响 应 头 部 也 和 请 求 头 一 样 包含 许多 服务 器 响应 相关 的 有 用 信息 ,例如 
服务 器 类 型 日 期 时 间 内容 类 型 和 长 度 等 。 该 部 分 是 可 以 在 响应 信息 中 省 略 的 。 

响应 数据 (响应 定义 的 第 6 一 13 行 ), 该 部 分 信息 由 Web 服务 器 将 处 理 结 果 封 装 为 
HTML 后 再 返回 给 Web 浏览 器 。Web 浏览 器 在 接收 到 响应 数据 之 后 ,对 整个 页 面 进 行 刷 
新 显示 。 

4. 关闭 TCP 连接 

一 般 情 况 下 , Web 服务 器 向 浏览 器 发 送 了 响应 信息 之 后 就 要 关闭 TCP 连接 。 在 
HTTP 1.1 中 .如果 在 Web 浏览 器 的 请 求 头 部 信息 中 指定 Connection 属性 为 keep-alive， 
TCP 连接 在 发 送 后 将 仍然 保持 打开 的 状态 ,浏览 器 就 可 以 继续 通过 相同 的 连接 发 送 请 求 ， 
这 样 节省 了 为 每 个 请 求 建立 新 连接 所 需 的 时 间 , 还 可 节约 网 络 带 宽 。 
242 


第 7 章 客户 端 数据 请 求 技术 





7.3.2 HTTP 请 求 的 调用 

在 7.2. 3 小 节 中 使 用 后 台 代 码 取得 了 Web Service 中 的 天 气 预 报 数据 ,但 是 并 没有 显 
示 到 Web 页 面 中 ,本 小 节 将 分 别 用 Java 的 动态 网 Sn aioli 
页 JSP 和 ASP. NET 的 中 动态 网 页 ASPX 取得 天 vBsrc 


气 预报 的 数据 并 展示 到 前 台 Web 页 面 中 。 oth 
因 GetWeatherForecastjava 
1. JSP 页 面 的 HTTP 请 求 》 A ot 
【 例 7-4】 JSP 页 面 中 的 HTTP 请 求 。 》 王 Apache Tomcat v7.0 [Apache Tomcat v7. 
01) 在 Eclipse 中 新 建 名 为 WeatherForecastWeb ”加 Vee 人 pP benes 
的 动态 Web 工程 ,并 将 相关 的 Web Service 的 包 导 和 poe 
>》 包 
人 WEB-INF 的 lib 目录 中 ,项 目的 目录 结构 如 v EE WEB-INF 
Ee Em >》 它 hb 
图 7-12 所 示 。 


(2) 在 Servlet 包 中 新 建 名 为 GetWeatherForecast 
.java 的 Servlet, 并 在 doGet 方法 中 输入 以 下 代码 。 图 7-12 JSP 下 的 HTTP 请 求 的 目录 
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(3) 在 WebContent 文件 夹 下 新 建 名 为 index. jsp 的 JSP 文件 。 





(4) 运行 index. jsp 页 面 ,并 选择 “北京 ”。 单 击 “ 查 询 ” 按 钮 ,运行 效果 如 图 7-13 所 示 。 


ESIR| 一 
直辖 市 北京 
北京 


792 

2016/12/06 19:30:30 

今日 天 气 实况 : 气温 : 1*C; 风向 /风力 : 东北 风 1 级 ; 湿度 : 55% 
最 弱 。 空 气质 量 : 中 。 


紫外 线 强度 : 。 空 
紫外 线 指数 。 最 弱 ， 辐 射 弱 ， 涂 控 SpF8-12 防 旺 护 肤 品 。 感冒 指 
: 较 易 发 ， 温 差 较 大 ， 较 易 感 冒 ， 注 意 防 护 。 穿 : 较 
冷 ， 建 议 着 厚 外 套 加 毛衣 等 服装 。 洗 : 较 适宜 ， 无 雨 
较 小 ， 度 。 运动 指数 : 较 不 宜 ， i 
内 运动 。 污染 指数 ， 中 ， 易 感人 群 应 适当 减少 室 
12 月 6 日 给 
—3°C/6°C 
无 持续 风向 微风 


图 7-13 JSP 的 HTTP 请 求 


(5) 在 IE 的 “开发 人 员工 具 ” 中 查看 HTTP 请 求 。 在 I 正 浏 览 器 中 选择 “工具 ”>“ 开 发 
人 员工 具 ” 菜 单 . 该 工具 提供 了 各 种 网 页 调试 的 便利 工具 。 在 弹出 的 “工具 框 ”" 中 选择 “网 络 ” 
选项 卡 后 ,在 页 面 上 进行 查询 操作 .就 能 看 到 如 图 7-14 所 示 的 HTTP 请 求 信息 。 

拖 动 右边 的 滚动 条 能 看 到 请 求 标 头 的 信息 。 选 择 * 正 文 " 选 项 卡 ,能 看 到 HTTP 的 响应 
正文 和 请 求 正文 ,如 图 7-15 所 示 。 

2. ASP. NET 页 面 中 的 HTTP 请 求 

【 例 7-5】 ASP. NET 页 面 中 的 HTTP 请 求 。 

(1) 在 Visual Studio 中 创建 名 为 WeatherForecastWeb 的 Web 工程 .并 引入 天 气 预报 
的 Web Service, 具 体 目录 结构 如 图 7-16 所 示 。 
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第 7 章 客户 端 数据 请 求 技术 | 





网 洛 
> 由 竹 门 和 | 名 | 三 7- A ET 
7 结果 = 
路 径 协议 方法 指 述 内容 类 型 | 已 按 痰 时 间 羡 所 正之 多 政 Cookie 计时 


GetW: HP posr 200 143KB 346 秒 请 求 URL httpy/localhost8080/WeatherForecastWeb/GetWeatherForecast 
https//iocalhosti8080/.. OK 请 求 方法 : POST 

状态 码 : 二 200/ OK 

请求 标 头 

Accept: text/html, application/xhtml+ xml, image/per, °° 
Accept-Encoding: gzip, defiate 

Accept-Langunge: zh Hans-CN, hh-Hans q=05 
Cache-Controk no-cache 


Connection: Keep-Alive 





Content-Length: 10 

















wl 
图 7-14 在 “开发 人 员工 具 ” 中 查看 HTTP 请 求 
未 关 正文 Cookie 
WEX [请 冰 二 文 | 
ctyid; 792 
标 头 正文 “参数 。 Cookie 计时 
[ 哆 应 正文 | 请求 正文 母 中 4 Ey] WeatherForecastWeb 
“1 <table><tr>ctd> 直 辖 市 b 更 properties 
北京 </td></tr><tr>ktd? 北 京 c/td>c/tr?<tr>ktd2792</td><c/tr< b se 引用 
<td>2916/12/06 Service References 
19:51:35</td></tr><tr><td> 今 日 天 气 实 兄 : 气温 : TC; 风向 /风力 ; 4 Web References 
1 级 ; 湿度 : 57%</td></tr><tr><td> 紫 外 续 强 度 : 最 弱 。 空 气质 量 : 中 是 WeatherService 
<td) 紫 外 绪 指 数 : 最 樟 ， 辐 射 弹 ， 涂 撑 SPF8-12 防 晒 护 肤 品 * 4 WeatherWeb.aspx 
2 感冒 指数 : 较 易 发 , 温差 校 大 ， 较 易 感冒 ， 注 意 防护 站 WeatherWeb.aspx.cs 
3 穿 衣 指数 ; 较 冷 ， 建 议 着 厚 外 喜 加 毛衣 等 服装 * b 人 WeatherWeb.aspx.desig 
4 洗车 指 娄 ; 较 适 宜 ， 无 十 且 风 力 较 小 ， 易 保持 青 洁 度 。 站 Web.config 
图 7-15 查看 HTTP 请 求 的 正文 图 7-16 ASP. NET 的 Web 工程 目录 


(2) 在 WeatherWeb. aspx 中 编写 前 台 显示 代码 。 


<%@ Page Language="C#" RutoEventWireup="true" CodeBehind= "WeatherWeb.aspx.cs" 
WeatherForecastWeb .WeatherWeb" %> 








Inherits= 
< IDOCTYPE html> 
<html xmlns="http://www.w3.0rg/1999/xhtml"> 
<head runat="server"> 





<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
</head> 
<body> 
<form id="forml" runat="server"> 
<div> 
<asp:DropDownList ID="ddCity" runat="server"> 
<asp:ListItem> 重 庆 < /asp:ListItem> 
<asp:ListItem> 北 京 </asp:ListItem> 
</asp:DropDownList> 
<asp:ButtonID="btnClick" runat="server" 
Text=" 天 气 查询 " OnClick="btnClick Click" /> 
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(3) 在 WeatherWeb. aspx. cs 中 编写 后 台 显 示 代 码 。 





(4) 运行 该 页 面 并 选择 “北京 ”, 单 击 “ 查 询 ” 按 钮 ,运行 效果 如 图 7-17 所 示 。 





54511. jpg 
2016-12-9 15:37:14 
-5C/AC 


18. gi 
今天 气 实况 ， 气 温 ，3C， 风向/ 风力， 西南 风 2 级 : 湿度 ，28%; 


和 外 全 共和 ， 最 加 -医生 流入 pro_12 防 厅 护 肤 品 。 感冒 指 
， 强 降 较 大 ， 极 易 感 冒 。 字 衣 指数 ，; 





7-17 ASP. NET 的 HTTP 请 求 


以 上 请 求 方法 中 ,关于 在 浏览 器 中 查看 HTTP 请 求 的 方法 请 参考 例 7-4 的 第 (5) 步 。 
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7.4 aax 


ajax(Casynchronous JavaScript and XML ,异步 JavaScript 和 XML) 是 一 种 创建 交互 式 
网 页 应 用 的 网 页 开发 技术 。 相 对 于 采用 HTTP 请 求 的 传统 网 页 更 新 内 容 时 重 载 整个 网 页 
页 面 而 言 , 采 用 ajax 技术 的 网 页 不 必 中 断交 互 ,完整 地 刷新 页 面 ,就 可 以 动态 地 更 新 Web 
页 面 。 这 里 的 异步 是 相对 于 HTTP 请 求 流程 而 言 的 , HTTP 请 求 是 顺序 执行 的 ,是 同步 
的 。 将 对 Web 服务 器 的 请 求 和 数据 加 载 从 当前 浏览 器 页 面 独 立 出 来 并 单独 执行 就 是 异步 
请 求 , 它 通过 JavaScript 接收 服务 器 传 来 的 数据 ,然后 操作 DOM 对 网 页 的 某 部 分 进行 更 
新 。 使 用 ajax 技术 最 直观 的 感受 是 向 服务 器 获取 新 数据 时 不 需要 刷新 页 面 等 待 了 ,使 用 它 
可 以 创建 更 加 丰富 、 更 加 动态 的 Web 应 用 程序 用 户 界 面 , 其 即时 性 与 用 户 体验 感 甚至 能 够 
接近 桌面 应 用 程序 。 

ajax 不 是 一 种 新 的 编程 语言 , 它 是 多 种 技术 的 综合 ,包括 JavaScript\ XHTML 和 CSS、 
DOM XML 和 XSTL、XMLHttpRequest。 其 中 ,使 用 XHTML 和 CSS 可 进行 标准 化 呈 
现 ,使 用 DOM 可 以 实现 动态 显示 和 交互 ,使 用 XML 和 XSTL 可 以 进行 数据 交换 与 处 理 ， 
使 用 XMLHttpRequest 对 象 可 以 进行 异步 数据 读 取 ,使 用 JavaScript 可 以 绑 定 和 处 理 所 有 
数据 。 


7.4.1 XMLHttpRequest 对 象 


XMLHttpRequest( 可 扩展 超 文本 传输 请 求 ,简称 XHR) 对 象 是 ajax 的 核心 对 象 。 它 提 
供 了 对 HTTP 协议 的 完全 访问 ,包括 做 出 POST 和 HEAD 请 求 以 及 普通 的 GET 请 求 的 
能 力 。XMLHttpRequest 对 象 可 以 异步 地 返回 Web 服务 器 的 响应 ,并 且 能 以 文本 或 者 一 
个 DOM 文档 形式 返回 内 容 。 尽 管 名 为 XMLHttpRequest, 它 并 不 限于 和 XML 文档 一 起 
使 用 , 它 可 以 接收 任何 形式 的 文本 文档 。 它 为 向 服务 器 发 送 请 求 和 解析 服务 器 响应 提供 了 
流畅 的 接口 。 通 过 这 个 对 象 ,ajax 可 以 像 桌面 应 用 程序 一 样 与 Web 服务 器 进行 数据 的 交 
换 , 而 不 用 每 次 都 刷新 界面 ,也 不 用 每 次 将 数据 处 理 的 工作 都 交 给 服务 器 来 做 ;这 样 既 减 轻 
了 服务 器 负担 又 加 快 了 响应 速度 ,缩短 了 用 户 等 待 的 时 间 。 

1. 创建 XMLHttpRequest 对 象 

IE 5.0 开始 ,开发 人 员 在 Web 页 面 中 使 用 的 XMLHttpRequest 对 象 是 通过 MSXML 
库 中 一 个 ActiveX 对 象 实现 的 .IE 7 以 上 版 本 及 其 他 较 新 的 浏览 器 (Firefox Chrome Safari 
以 及 Opera 等 ) 均 内 建 了 XMLHttpRequest 对 象 .XMLHttpRequest 对 象 得 到 了 现代 所 有 
浏览 器 较 好 的 支持 。 在 这 些 浏览 器 中 只 需 使 用 XMLHttpRequest 构造 函数 就 可 以 构造 
XMLHttpRequest 对 象 。 如 下 的 代码 用 于 构建 兼容 不 同 浏览 器 的 XMLHttpRequest 对 象 : 





<script language="javascript" type="application/javascript"> 
var xmlhttp; 
if (window.XMLHttpRequest) { 
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// 适 合 IE 7+、Firefox、Chrome、Opera、Safari 的 代码 
xmlhttp=new XMLHttpRequest (); 
jelset 
// 适 合 IE 6 及 IE 5 的 代码 
xmlhttp=new RctiveXObject ("Microsoft-XMLHTTP") 7 
} 
</script> 


2. 向 服务 器 发 送 请 求 

在 创建 好 XMLHttpRequest 对 象 之 后 ,我们 可 以 使 用 XMLHttpRequest 对 象 的 open() 和 
send() 方 法 向 服务 器 发 送 请 求 。open() 用 于 初始 化 HTTP 请 求 参 数 ,但 并 不 发 送 请 求 ; 
send() 用 于 向 服务 器 发 送 HTTP 请 求 。 它 们 的 语法 规则 如 表 7-4 所 示 。 

表 7-4 XMLHttpRequest 对 象 的 open() 和 send( ) 方 法 
方 法 描 述 

规定 请 求 的 类 型 .URL 以 及 是 否 异 步 处 理 请 求 。 
method: 请 求 的 类 型 为 GET 或 POST。 
url: 文件 在 服务 器 上 的 位 置 。 该 文件 可 以 是 任何 类 型 的 文件 ,比如 . txt 
和 . xml; 或 者 服务 器 脚本 文件 ,比如 . asp 和 . php( 在 传 回响 应 之 前 ,能 够 在 
服务 器 上 执行 任务 )。 
async: true( 异 步 ) 或 false( 同 步 )。 如 果 要 用 于 ajax, 必 须 设置 为 true 


send(string) 将 请 求 发 送 到 服务 器 。 参 数 string 仅 用 于 POST 请 求 








open(Cmethod,url,async) 








类 似 于 HTTP 请 求 ,XMLHttpRequest 对 象 也 能 使 用 GET 和 POST 的 方法 。 
(1) 使 用 GET 的 形式 向 服务 器 发 送 请 求 
以 不 带 参数 的 GET 方式 发 送 请 求 ,如 下 所 示 。 


<script language="javascript" type="application/javascript"> 
xmlhttp.open ("GET", "demo _ get.asp",true); 
xmlhttp.send(); 

</script> 


采取 这 样 的 方式 取得 的 结果 可 能 是 本 地 的 缓存 结果 ,为 了 避免 这 种 情况 ,可 以 在 URL 
地 址 后 附加 一 个 随机 数 ,强制 让 服务 器 每 次 都 到 服务 器 上 去 取得 最 新 的 数据 。 代 码 如 下 
所 示 。 


<script language="javascript" type="application/javascript"> 
xmlhttp.open ("GET", "demo get.asp? t="+Math.random(),true); 
xmlhttp.send(); 

</acript> 


如 果 要 向 服务 器 发 送 其 他 带 参数 的 请 求 , 代 码 和 以 上 的 示例 类 似 ,只 是 变量 名 要 和 服务 
器 端的 变量 一 致 。 

(2) 使 用 POST 的 形式 向 服务 器 发 送 请 求 

当 需 要 向 服务 器 发 送 大 量 数据 或 者 发 送 的 数据 中 包括 未 知 字符 的 用 户 输入 时 ,需要 用 
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到 POST 方式 发 送 请 求 ,代码 如 下 所 示 。 


<script language="javascript" type="application/javascript"> 
xmlhttp.open ("POST", "ajax test.asp",true); 
xmlhttp.setRequestHeader ("Accept-Language "," zh-cn"); 
xmlhttp.send("fname=Bill&lname=Gates"); 

</script> 


其 中 ,setRequestHeader(header,value) 方 法 的 值 取 的 是 HTTP 请 求 的 头 部 的 信息 ,将 
名 称 / 值 的 形式 对 应 到 header、value 字段 中 。 

(3) onreadystatechange 事件 

当 使 用 的 XMLHttpRequest 对 象 的 open() 方 法 的 async 参数 设置 为 true 时 ,就 需要 
使 用 XMLHttpRequest 的 onreadystatechange 事件 来 监听 请 求 的 执行 情况 , 它 的 典型 代码 
如 下 所 示 。 


<script language="javascript" type="application/javascript"> 
xmlhttp.onreadystatechange=function(){ 
if(xmlhttp.readyState==4 && xmlhttp.status==200){ 
//Topo 对 服务 器 应 管内 容 进行 操作 并 显示 
} 
} 
</script> 


以 上 代码 的 第 3 行 的 readyState 属性 保存 有 XMLHttpRequest 对 象 的 状态 信息 , 当 一 
个 XMLHttpRequest 对 象 被 创建 时 ,这 个 属性 值 从 0 开始 ,直到 接收 到 完整 的 HTTP 响 
应 ,这 个 值 增加 到 4。 它 们 的 含义 如 表 7-5 所 示 。 

表 7-5 readyState 属性 
状态 代码 描 述 
0 XMLHttpRequest 对 象 已 被 创建 或 已 被 abort() 方 法 重 置 

open() 方 法 已 调用 .但 send() 方 法 还 没 被 调用 ,请 求 尚未 发 送 
send() 方 法 已 调用 ,HTTP 请 求 已 发 送 到 服务 器 ,但 还 没有 收 到 响应 
所 有 响应 头 部 已 经 收 到 。 响 应 体 开 始 接收 但 尚未 完成 
HTTP 响应 已 经 完全 接收 

















|wlv|- 





readyState 属性 值 不 会 递减 .除非 当 一 个 请 求 在 处 理 过 程 中 调用 了 open( ) 或 abort() 方 
法 。 每 次 这 个 属性 值 增加 时 .都 会 触发 onreadystatechange 事件 句柄 。 一 次 完整 的 请 求 过 
程 状态 由 0 到 4,onreadystatechange 事件 就 被 触发 了 5 次 。 

第 3 行 的 status 属性 是 服务 器 返回 的 HTTP 响应 码 ( 参 考 表 7-3) , 当 为 200 时 ,表示 读 
取 返 回 值 成 功 。 

所 以 , 当 readyState 等 于 4 目 status 等 于 200 时 ,表示 响应 已 经 就 绪 , 就 可 以 在 代码 中 
处 理 返回 的 内 容 了 。 

3. 获取 响应 内 容 

XMLHttpRequest 对 象 有 两 个 属性 来 存储 响应 的 内 容 : responseText 和 responseXML， 
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如 表 7-6 所 示 。 
表 7-6 responseText 和 responseXML 
属 性 描 述 
responseText 获得 字符 串 形 式 的 响应 数据 
response XML 获得 XML 形式 的 响应 数据 





4. XMLHttpRequest 对 象 的 使 用 

现在 以 XML 文件 作为 Web 服务 器 的 响应 内 容 , 来 完成 一 个 完整 的 XMLHttpRequest 
对 象 的 请 求实 例 , 如 例 7-6 所 示 。 

【 例 7-6】 XMLHTTPRequest 对 象 请 求 XML 文件 。 

(1) 建立 如 下 的 餐厅 菜单 的 XML 文件。 





(2) 创建 HTML 代码 ,如 下 所 示 。 
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(3) 程序 的 运行 效果 如 图 7-18 所 示 。 
利用 XMLHttpRequest 对 象 取得 XML 数据 : 


京 疹 肉 毕 
剖面 


7-18 利用 XMLHttpRequest 对 象 取得 XML 数据 


注意 : 本 例 的 代码 必须 放 在 IIS 或 者 Tomcat 中 运行 ,否则 不 能 取得 XMLHttpRequest 对 
象 status 属性 的 值 。 


7.4.2 JSON 


在 Web 浏览 器 和 Web 服务 器 进行 交互 的 过 程 中 ,可 能 需要 将 服务 器 的 对 象 传递 到 浏 
览 器 中 ,也 可 能 需要 把 浏览 器 的 对 象 传递 到 服务 器 上 。 在 Web 浏览 器 中 主要 用 JavaScript， 
在 后 台 人 逻辑 程序 中 使 用 Java、C# 、PHP 等 后 台 语 言 。 如 何 实现 这 两 种 不 同类 型 语言 之 间 的 
信息 传递 呢 ? 使 用 之 前 讲 到 的 XML 文件 是 一 个 不 错 的 选择 ,但 是 这 种 方式 需要 浏览 器 和 
服务 器 在 每 次 通信 过 程 中 都 要 对 XML 文件 进行 解析 。 如 果 有 一 种 形式 能 直接 将 对 象 进 行 
传递 ,将 为 程序 员 减 少 不 少 的 工作 量 。 

JSON (JavaScript object notation,JavaScript 对 象 表 示 法 ) 是 一 种 轻 量 级 的 具有 自我 描 
述 性 的 数据 交换 格式 。 它 基于 ECMAScript 的 一 个 子 集 。JSON 采用 完全 独立 于 语言 的 文 
本 格式 。 这 些 特 性 使 JSON 成 为 理想 的 数据 交换 语言 。 它 可 以 将 JavaScript 对 象 中 表示 的 
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一 组 数据 转换 为 字符 串 ,然后 就 可 以 在 JavaScript 函数 之 间 轻 松 地 传递 这 个 字符 串 , 或 者 在 
异步 应 用 程序 中 将 字符 串 在 Web 客户 机 和 Web 服务 器 端 程序 之 间 来 回 传递 。 

1. JSON 的 语法 

JSON 的 书写 规则 为 “名 称 / 值 对 ”的 形式 ,中 间 用 *:“ 相 连接 。 类 似 于 HTTP 请 求 的 请 
求 头 部 的 表示 方式 ,但 是 在 这 里 名 称 和 值 都 必须 用 双 引 号 包括 。JSON 语法 如 下 : 


{ "name":" 宫 保 鸡 丁 "} 


以 上 定义 可 以 理解 为 name 一 " 宫 保 鸡 丁 "。JSON 值 可 以 是 数字 (整数 或 浮 点 数 ) .字符 
串 (string)、 逻 辑 值 (true 或 false) .数组 (在 方 括号 中 )、 对象 (在 花 括 号 中 ) 或 者 null。 一 个 
“名 称 / 值 对 ?没有 确切 的 含义 。 当 多 个 “名 称 / 值 对 ” 串 在 一 起 时 就 能 体现 JSON 的 价值 。 
“名 称 / 值 对 ”之 间 用 “, "连接 , 且 将 它们 放置 在 一 个 “{}” 之 中 就 表示 一 个 对 象 。JSON 对 象 
的 表示 如 下 所 示 。 


{"id":001,， "name":" 官 保 鸡 丁 ", "price":20.00} 


将 一 组 JSON 对 象 表 示 在 数组 中 时 ,就 成 为 JSON 对 象 数组 。JSON 对 象 数组 的 表示 
和 JavaScript 的 数组 表示 一 样 ,将 对 象 放置 在 “[]” 之 中 ,对 象 之 间 用 “, "分隔 。JSON 对 象 
数组 的 表示 如 下 所 示 。 


| 
"menu":[ 
{"id":"001", "name":" 官 保 鸡 丁 ", "price":20.00}, 
{"id":"002", "name":" 京 将 肉 丝 ", "Price":28.00}， 
{"id":"003", "name":" 乱 炖 ", ”Price":32.00}， 
{"id":"004", "name":" 重 庆 小 面 ", "price":7.00} 


} 


以 上 JSON 数组 将 7. 4. 1 小 节 实 例 中 的 XML 文件 转换 为 了 JSON 的 表示 方式 。 对 比 
两 种 表示 方式 ,JSON 的 表示 方式 相对 于 XML 来 说 更 为 简洁 ,计算 机 通过 索引 就 能 读 到 响 
应 的 字段 ,XML 还 要 经 过 文档 的 解析 。 从 编码 阅读 性 上 来 说 ,XML 有 规范 的 标签 形式 ,更 
利于 阅读 和 理解 ,JSON 对 象 要 是 去 掉 空白 制 表 符 以 及 换行 ,JSON 就 是 密密麻麻 的 数据 ,不 
便于 人 们 的 阅读 和 理解 。 但 是 它们 都 具有 很 好 的 扩展 性 ,可 以 这 么 说 ,没有 什么 是 XML 可 
以 扩展 而 JSON 却 不 能 扩展 的 。 不 过 JSON 在 JavaScript 中 可 以 存储 JavaScript 复合 对 象 ， 
有 着 XML 不 可 比拟 的 优势 。 

2. JSON 在 JavaScript 中 的 应 用 
于 JSON 语法 是 JavaScript 语法 的 子 集 ,因此 可 以 使 用 JavaScript 中 的 全 局 函数 
eval() 来 解析 JSON 文本 并 生成 JavaScript 对 象 。eval() 函数 只 有 一 个 参数 。 如 果 传 人 的 
参数 不 是 字符 串 , 它 直接 返回 这 个 函数 。 如 果 参 数 是 字符 串 , 它 会 把 字符 串 当 成 JavaScript 
代码 进行 编译 并 执行 ,所 以 将 JSON 文本 传 给 eval() 函数 后 能 得 到 JavaScript 的 对 象 。 它 
的 使 用 如 例 7-7 所 示 。 
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【 例 7-7】 在 JavaScript 中 使 用 JSON。 





程序 的 运行 效果 如 图 7-19 所 示 。 
利用 JavaScript 来 取得 JSON 对 象 数据 : 


可 和 
京 桨 肉 丝 
乱 籽 
重庆 小 面 
图 7-19 在 JavaScript 中 使 用 JSON 


JSON 对 象 的 优势 在 异步 Web 应 用 程序 中 。 关 于 JSON 在 ajax 中 的 使 用 .在 第 8 章 的 


综合 项 目 中 将 大 量 采用 。 详 细 的 例子 参考 第 8 章 的 综合 项 目 。 
7.4.3 jQuery 中 的 ajax 


因为 不 同 的 浏览 器 对 ajax 的 实现 并 不 相同 ,编写 常规 的 ajax 代码 并 使 之 在 各 个 浏览 器 


之 间 兼 容 并 不 容易 。 在 实现 相应 功能 的 同时 ,还 必须 编写 额外 的 代码 对 不 同 的 浏览 器 进行 
测试 。 不 过 ,jQuery 解决 了 这 个 难题 ,在 jQuery 库 中 提供 了 完整 的 ajax 兼容 套件 ,只 需要 
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一 行 简单 的 代码 ,就 可 以 实现 在 各 个 浏览 器 之 间 兼 容 的 ajax 功能 。 也 就 是 说 ,通过 jQuery 
的 ajax 方法 ,能 够 使 用 HTTP 请 求 的 Get 方式 或 者 Post 方式 从 远程 服务 器 上 请 求 文本 、 
HTML、XML 或 JSON 数据 。 在 jQuery 中 $.ajax() 方 法 属于 最 底层 的 函数 ,第 2 层 是 
$ .load()、$ .get() 和 $.post() 函 数 ,第 3 层 是 $.getScript() 和 $. getJSON() 函 数 。 

1.$ .ajax() 函 数 

$ .ajax() 函数 是 jQuery 对 ajax 封装 最 基础 的 函数 ,通过 这 个 函数 可 以 完成 异步 通信 
的 所 有 功能 。 该 方法 的 参数 类 似 于 JSON 文本 定义 对 象 的 形式 ,采用 “名 称 / 值 对 ”的 形式 ， 
用 “:“” 相 连接, 不 同 的 “名 称 / 值 对 ”之 间 用 *, ”连接 ,$ .ajax() 函数 的 语法 如 下 所 示 。 





$.ajax({name:value, name:value, ... }) 


$ .ajax() 函 数 中 常用 的 “名 称 / 值 对 ”如 表 7-7 所 示 。 
表 7-7 $.ajax() 函 数 中 常用 的 “名 称 / 值 对 ” 


























名 称 值 
type 规定 请 求 的 类 型 (GET 或 POST) 
url 规定 请 求 的 URL 
async 布尔 值 , 表 示 请 求 是 否 异 步 处 理 。 默 认 是 true 
data 规定 要 发 送 到 服务 器 的 数据 
dataType 预期 的 服务 器 响应 的 数据 类 型 
error( xhr, status,error) 当 请 求 失败 时 要 运行 的 函数 
success(result ,status, xhr) 当 请 求 成 功 时 运行 的 函数 
Re 请 求 完成 时 运行 的 函数 (在 请 求 成 功 或 失败 之 后 均 调用 , 即 在 success 
和 error 函数 之 后 ) 





使 用 jQuery 的 ajax 不 但 能 够 向 Web 服务 器 端的 资源 发 起 请 求 , 还 能 向 WebService 发 
起 请 求 。 关 于 jQuery 中 ajax 的 开发 实例 ,在 第 8 章 的 综合 项 目 中 有 大 量 的 实例 ,本 章 以 用 
$. ajax() 函 数 来 取得 返回 JSON 对 象 的 天 气 预报 WebService 的 例子 来 说 明 $. ajax() 的 使 
用 方法 ,代码 如 例 7-8 所 示 。 

【 例 7-8】 使 用 $ .ajax() 函 数 取 得 天 气 预报 。 


<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jQuery 的 ajax 连接 WebService:</title> 
<script type="text/javascript" src="js/jquery.min.js"></script> 
<style> 
span { 
display: inline-block; 
width: 150px; 
} 
</style> 
<script language="javascript" type="application/javascript"> 
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程序 的 运行 效果 如 图 7-20 所 示 。 
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数据 ,并 把 返 





$ajax 调 用 WebService 查 询 天 气 预 报 


要 v|[ 吉 和 | 




















重庆 ”2 日 星期 五 ”微风 级 ”无 持续 风向 高 温 13°C 低温 10:C 阴 
重庆 ”3 日 星期 六 ”微风 级 ”无 持续 风向 高 温 13°C 低温 8"C 小 雨 
重庆 ”4 日 星期 天 ”微风 级 ”无 持续 风向 高 温 15°C 低温 8"C 晴 
重庆 5 日 星期 一 微风 级 ”无 持续 风向 高 温 16"C 低温 11°C EE 


重庆 ”6 日 星期 二 ”微风 级 ”无 持续 风向 高 温 16"C ”低温 10°C 





7-20 使 用 jQuery 的 ajax 


2. $ .load() 函 数 


$. load() 函数 是 jQuery 中 最 简单 和 比较 常用 的 ajax 方法 , 它 可 以 请 求 从 服务 器 加 载 





回 的 数据 放置 到 指定 的 元 素 中 。$.1load() 的 语法 如 下 : 


load(url,parameters,callback) 


其 中 ,url 是 希望 请 求 的 url 地 址 (HTML 文件 的 地 址 ) ,是 字符 串 类 型 , 且 是 必须 要 设 


定 参 数 ;parameters 是 规定 要 发 送 到 服务 器 的 数据 ,采用 “名 称 / 值 对 ”的 形式 ,该 项 为 可 选 参 
数 ;callback 是 请 求 完 成 时 的 回调 函数 ,函数 function(data,status, xhr) 为 JavaScript 的 形 
式 ,data 包含 了 请 求 的 结果 数据 ,status 包含 请 求 的 状态 , xhr 包含 了 XMLHttpRequest 对 
象 ,该 项 也 为 可 选项 。 但 是 如 果 需 要 对 结果 进行 处 理 时 ,该 函数 不 能 省 略 。$ .load() 函数 
的 应 用 如 例 7-9 所 示 。 
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【 例 7-9】 


使 用 $. load() 函数 取 得 天 气 预 报 。 


首先 创建 一 个 如 下 的 天 气 预 报 的 HTML 页 面 。 


< IDOCTY’ 
<html> 
<head> 


PE html> 


<meta charset="UTF- 8"> 
<title>Insert title here</title> 


</head> 
<body> 


<div id="beijingWeather"> 


<div id="FortyEightHours"> 

<span> 北 京 </span><span>23 日 星期 五 < /span><span> 微 风 级 </span><span> 南 
风 < /span> 

<span> 高 温 3C</span><span> 低 温 -6C</span><span> 晴 </span><br> 
<span> 北 京 </span><span>24 日 星期 六 </span><span> 微 风 级 </span><span> 南 
风 </span> 

<span> 高 温 3C</span><span> 低 温 -5C</span><span> 多 云 </span><br> 
</div> 

<span> 北 京 </span><span>25 日 星期 天 </span><span> 微 风 级 </span><span> 南 
风 < /span> 

<span> 高 温 3C</span><span> 低 温 -2C</span><span> 手 </span><br> 
<span> 北 京 </span><span>26 日 星期 一 </span><span> 微 风 级 </span><span> 北 
风 </span> 

<span> 高 温 1C</span><span> 低 温 -7C</span><span> 阴 </span><br> 


第 7 章 客户 端 数据 请 求 技术 








再 创建 显示 页 面 ,具体 的 HTML 代码 如 下 : 





程序 的 运行 效果 如 图 7-20 所 示 ,注意 运行 时 需要 把 页 面部 署 到 Tomcat 或 者 IIS 中 。 

在 本 例 中 的 load 函数 的 url 参数 是 天 气 预报 网 页 的 地 址 , 它 将 整个 网 页 都 载 人 显示 页 
面 中 。 如 果 只 需要 将 一 部 分 的 内 容 载 人 本 页 面 中 ,可 以 在 url 中 指定 需要 载 人 的 标签 。 在 
本 例 中 如 果 只 想 载 人 48 小 时 内 的 天 气 预 报 , 只 需要 将 名 为 FortyEightHours 的 Div 进行 载 
入 ,所 以 load 函数 需 做 如 下 的 修改 。 
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代码 修改 后 的 运行 效果 如 图 7-21 所 示 。 


S$.load0 调 用 本 服务 器 内 的 天 气 预 报 
[es] 


北京 ”23 日 星期 五 ”微风 级 南 风 ”高 温 3°C ”低温 -6°C 晴 
北京 ”24 日 星期 六 ”微风 级 南 风 ”高 温 3°C 低温 -5*C 多 云 





7-21 用 load 函数 调 取 本 站 的 资源 


3. .get() 函数 
当 确 定 以 GET 方式 向 服务 器 发 起 ajax 请 求 时 ,可 以 直接 使 用 jQuery 的 实用 工具 函数 
$ .get()。$. get() 函数 的 语法 如 下 : 


其 中 , url、 parameters、callback 与 $. 1oad() 函 数 的 对 应 参数 的 作用 是 一 样 的 。 
dataType 是 预期 的 服务 器 响应 的 数据 类 型 ,默认 情况 下 jQuery 会 进行 智能 判断 ,该 项 也 为 
可 选项 。 以 下 代码 将 $. ajax() 函数 调用 的 天 气 预报 的 Web Service 改 为 $. get() 的 形式 ， 
如 例 7-10 所 示 。 

【 例 7-10】 使 用 $ get () 函数 取得 天 气 预报 。 
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4。 避 .post() 函数 
当 确 定 以 POST 方式 向 服务 器 发 起 ajax 请 求 时 ,可 以 直接 使 用 jQuery 的 实用 工具 函 
数 $. post()。$. post() 函 数 的 语法 如 下 : 





$. post() 函数 中 参数 的 定义 与 $. get() 函 数 一 样 。 以 下 代码 将 调用 的 天 气 预 报 的 
Web Service 改 为 $. post() 的 形式 ,如 例 7-11 所 示 。 
【 例 7-11】 使 用 $ post() 函 数 取 得 天 气 预 报 。 





5.$ .getJSON() 函数 
当 确 定 服务 器 响应 的 格式 为 JSON 格式 的 时 候 , 可 以 直接 使 用 jQuery 的 实用 工具 函数 
$. getJSON(C) 。$. getJSON() 函数 的 语法 如 下 : 





$. getJSON() 函数 的 参数 的 定义 与 $. get() 函数 、$. post() 函 数 一 样 。 在 已 经 判定 了 
服务 器 返回 的 数据 格式 为 JSON 的 情况 下 ,不 用 再 设 定 dataType 的 值 。 以 下 代码 将 调用 的 
天 气 预 报 的 Web Service 改 为 $. getJSON() 的 形式 ,如 例 7-12 所 示 。 

【 例 7-12】 使 用 $ getJSON () 函 数 取得 天 气 预 报 。 
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6. $$.getScript() 函数 

通常 在 编写 HTML 文件 时 ,习惯 把 全 部 JavaScript 文件 都 写 入 Head 中 ,这 样 页 面 在 
初次 加 载 时 就 取得 了 所 需要 的 全 部 JavaScript 文件 ,这 样 做 可 能 会 拖 慢 页 面 的 加 载 速度 ,有 
些 情 况 下 也 是 没有 必要 的 。 虽 然 可 以 在 需要 哪个 JavaScript 文件 时 ,通过 jQuery 动态 的 创 
建 二 script 之 标签 后 加 入 Head 中 ,但 是 这 种 方式 并 不 理想 。 为 此 ,jQuery 提供 了 $. 
getScript() 函数 来 加 载 JavaScript 文件 ,这 种 方式 与 加 载 一 个 HTML 片段 一 样 简单 方便 ， 
并 且 不 需要 对 JavaScript 文件 进行 处 理 ,JavaScript 文件 会 自动 执行 。 

将 $. getJSON 的 代码 作为 例子 进行 改造 ,具体 如 例 7-13 所 示 。 

【 例 7-13】 使 用 $ getScript (函数 取得 天 气 预报 。 

将 取得 天 气 预 报 的 函数 独立 到 weather.js 的 文件 中 。 





调用 的 这 个 函数 的 jQuery 代码 如 下 所 示 。 
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7. 关于 JSON 和 JSONP 

JSON 和 JSONP(JSON with padding) 虽 然 只 有 一 个 字母 的 差别 ,但 其 实 它们 完全 就 是 
不 同 的 两 个 事物 ,JSON 是 一 种 ajax 的 数据 交换 格式 ,而 JSONP 是 一 种 ajax 用 来 解决 跨 域 
问题 的 非 官方 跨 域 数 据 交互 协议 。 关 于 JSON 在 之 前 的 章节 中 已 经 做 过 详细 的 说 明 , 这 里 
只 说 明 一 下 JSONP。 
于 同 源 策略 中 规定 只 允许 当前 源 (域名 .协议 .端口 ) 的 资源 进行 通信 ,也 就 是 说 位 于 
不 同 的 源 下 的 ajax 请 求 不 能 取得 对 方 的 数据 。 不 过 在 Web 页 面 上 调用 JavaScript 文件 时 ， 
则 不 受 是 否 跨 域 的 影响 。 为 了 实现 跨 域 请 求 ,一 种 可 行 的 方案 是 在 远程 服务 器 上 设法 把 数 
据 装 进 JavaScript 格式 的 文件 里 ,然后 在 请 求 端 通过 HTML 的 二 script 二 标签 实现 跨 域 请 
求 装 有 数据 的 JavaScript 文件 ,从 而 解决 了 跨 域 的 数据 请 求 。 而 JSON 的 纯 字 符 数据 格式 
可 以 简洁 地 描述 复杂 数据 , 且 被 JavaScript 支持 ,在 客户 端 几乎 可 以 随心 所 欲 地 处 理 这 种 格 
式 的 数据 的 特性 让 JSON 成 为 跨 域 传输 的 理想 格式 。 所 以 到 目前 为 止 最 被 推崇 或 者 说 首选 
的 方案 是 用 JSON 来 传输 数据 , 靠 JSONP 来 实现 跨 域 。 























本 章 小 结 


本 章 对 Web 开发 中 的 客户 端 数 据 请 求 技术 进行 了 详细 的 讲解 ,着 重 介 绍 了 Web 
Server HTTP 请 求 ,以 及 ajax 技术 ,这 三 种 技术 是 目前 在 Web 开发 中 进行 前 后 台 交 互 的 主 
流 技术 。 每 种 技术 在 讲解 的 时 候 , 都 遵循 由 浅 入 深 的 原则 , 先 讲解 其 基础 技术 ,再 在 其 上 进 
行 扩展 说 明 ,最 后 对 这 种 技术 进行 讲解 。 在 讲解 的 过 程 中 每 个 重要 的 知识 点 都 配 有 典型 的 
案例 ,可 以 很 好 地 帮助 学 习 者 理解 及 掌握 。 
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第 8 章 在 线 订 餐 网 站 


8.1 项 目 背 景 


随 着 电子 商务 的 快速 发 展 , 人 们 已 经 习惯 于 在 互联 网 上 选 购 自己 所 需 的 各 种 商品 。 但 
是 对 于 餐饮 行业 的 各 种 菜品 来 说 , 它 无 法 和 传统 商品 一 样 适合 长 距离 的 运输 。 为 了 保持 菜 
品 的 新 鲜 和 美味 ,必须 要 在 很 短 的 时 间 内 就 送 到 顾客 的 手中 。 快 速 的 配送 成 为 网 上 订餐 能 
和 否 成 功 的 关键 条 件 。 在 网 上 订餐 还 没有 发 展 起 来 之 前 ,人 们 普遍 采取 电话 订餐 的 方式 ,但 是 
这 样 的 方式 有 明显 的 油 端 ,比如 菜品 展示 不 直观 ;商家 推广 困难 ,只 能 靠 顾 客 间 相互 推荐 ; 商 
家 需要 请 专门 的 员工 来 配送 ,使 得 成 本 增加 等 。 伴 随 着 近 几 年 餐饮 外 卖 的 配送 业务 的 发 展 ， 
出 现 了 美 团 、 百 度 等 大 型 外 卖 配送 公司 ,解决 了 配送 问题 之 后 ,促进 了 网 上 订餐 的 大 发 展 ,这 
也 让 人 们 更 喜欢 在 网 上 订餐 ,人 们 在 足 不 出 户 的 情况 下 ,就 能 享受 到 美味 的 食物 。 

本 章 利用 所 学 的 知识 来 开发 一 个 简易 的 网 上 订餐 系统 ,要 求 系统 能 提供 良好 的 用 户 界 
面 和 良好 的 用 户 体验 感 是 本 系统 设计 的 目标 。 系 统 功能 需 满足 以 下 需求 。 

(1) 用 户 能 够 随意 浏览 菜品 ,并 能 获取 菜品 的 详细 信息 ,如 菜品 图 片 预览 .菜品 介绍 ,以 
及 用 户 的 评价 。 

(2) 用 户 在 下 订单 之 前 必须 要 成 为 注册 用 户 , 且 可 以 对 自己 的 个 人 信息 进行 维护 。 

(3) 注册 用 户 可 以 管理 自己 的 购物 车 以 及 订单 。 

(4) 系统 要 提供 餐厅 后 台 管 理 端 程序 ,管理 员 需 要 登录 后 才能 进入 管理 程序 。 

(5) 管理 员 可 以 在 后 台 对 菜品 信息 进行 维护 。 

(6) 管理 员 可 以 在 后 台 进 行 订单 处 理 。 


8.2 系统 需求 和 设计 


根据 软件 开发 的 流程 ,在 完成 了 用 户 需求 调研 之 后 ,需要 进行 程序 的 设计 工作 ,为 简约 
起 见 , 本 系统 只 进行 功能 设计 、 数 据 库 设计 和 程序 设计 三 个 部 分 。 


8.2.1 功能 设计 
根据 系统 的 需求 描述 ,得 到 如 图 8-1 所 示 的 功能 模块 关联 图 。 
8.2.2 数据 库 设 计 
根据 需求 分 析 和 概要 设计 的 结果 ,本 系统 需要 设计 完成 以 下 的 数据 库 表 。 
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图 8-1 功能 模块 关联 图 
































注册 用 户 功 能 
月 购 | | 订 
[a 物 | | 单 
登 | | 车 | | 管 
录 复 理 














(1) 菜品 表 (food): 用 于 保存 菜品 相关 的 信息 ,该 表 是 整个 系统 的 基础 表 , 所 有 业务 处 
理 中 需要 用 到 的 菜品 信息 都 需要 从 本 表 中 取得 。 具 体 的 结构 如 表 8-1 所 示 。 


表 8-1 菜品 表 (food) 
































序号 字段 名 中 文 名 称 类 型 长 度 主键 备 注 
1 fID 菜品 ID varchar 50 是 
和 fName 菜品 名 称 varchar 100 
3 fDescription 菜品 描述 varchar 100 
4 fType 菜品 类 型 varchar 8 中 餐 ,西餐 等 
5 {Hobbies 菜品 口味 varchar 50 
6 {Technology 6 了 varchar 50 煎 . 炒 . 炖 、 炯 . 烤 、 炸 、 蒸 等 
7 fSeasonal 季节 推荐 varchar 50 春 、 夏 ,秋冬 
8 fPrice 价格 double 
9 {Image 菜品 图 片 varchar 100 图 片 地 址 
10 {Sales Volume 销量 Int 




















(2) 点 评 表 (comment): 用 于 保存 客户 对 菜品 的 评价 信息 ,用 户 在 购买 之 前 或 者 购买 之 
后 的 点 评 都 需要 记录 在 本 表 中 。 具 体 的 结构 如 表 8-2 所 示 。 


表 8-2 点 评 表 (comment) 




















序号 字段 名 中 文 名 称 类 型 长 度 主键 备 注 
1 cID 点 评 ID varchar 50 是 
2 TID 菜品 ID varchar 50 关联 菜品 表 
buyerName 用 户 账 号 varchar 12 关联 用 户 表 
4 evaluate 评价 内 容 varchar 500 
5 time 点 评 时 间 datetime 




















(3) 购物 车 表 (shop_cart): 用 于 保存 注册 用 户 的 购物 车 信息 。 具 体 的 结构 如 表 8-3 


所 示 。 
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表 8-3 购物 车 表 (shop_cart) 








序号 字段 名 中 文 名 称 类 型 长 度 | 主键 备 注 
1 fID 菜品 ID varchar 50 关联 菜品 表 
2 buyerName 用 户 账号 varchar 12 关联 用 户 表 


(4) 订单 表 (order): 用 于 保存 注册 用 户 的 菜品 订单 信息 ,具体 的 结构 如 表 8-4 所 示 。 
表 8-4 订单 表 (order) 












































序号 字段 名 中 文 名 称 类 型 长 度 主键 备 注 
1 orderID 订单 ID varchar 50 是 
2 fID 菜品 ID varchar 50 关联 菜品 表 
3 buyerName 用 户 账号 varchar 12 关联 用 户 表 
4 quantity 购买 数量 int 默认 值 为 1 
5 pay 支付 金额 double 
6 tradingStatus 交易 状态 varchar 12 
和 deliveryStatus 发 货 状 态 varchar 过 
8 time 下 单 时 间 datetime 


(5) 用 户 表 (buyer) : 用 于 保存 注册 用 户 的 个 人 相关 信息 ,具体 的 结构 如 表 8-5 所 示 。 
表 8-5 ”用 户 表 (buyer) 

















序号 字段 名 中 文 名 称 类 型 长 度 主键 备 注 
1 buyerName 用 户 账号 varchar 12 是 
2 password 密码 varchar 12 
3 receiver 收 货 人 varchar 100 
4 Address 收 货 地 址 varchar 100 
5 Tel 收 货 人 电话 varchar 11 























8.2.3 程序 设计 


一 套 好 的 系统 离 不 开 良 好 的 架构 设计 。 由 于 本 项 目的 特殊 性 ,需要 兼容 Java 和 CH# 语 
言 两 种 后 台 语 言 ,所 以 在 浏览 器 端 只 能 采取 静态 HTML 和 jQuery, 浏 览 器 端 和 服务 器 端的 
通信 采用 之 前 讲 过 的 jQuery 的 ajax 来 完成 。 程 序 的 整体 结构 如 图 8-2 所 示 。 


浏览 器 应 用 服务 器 数据 库 服务 器 





ajax 





图 8-2 程序 的 整体 结构 
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对 于 在 应 用 服务 器 部 分 的 代码 ,为 了 能 对 C# 和 Java 都 做 出 较 好 的 约束 ,也 为 了 能 共 
用 浏览 器 端的 全 部 代码 ,此 处 采用 了 工厂 方法 模式 来 控制 业务 逻辑 的 访问 方式 。 示 意图 如 
图 8-3 所 示 。 









求 处 理工 | 抽象 处 理 接口 | 
RN 请 求 处 理工 厂 抽象 处 理 接口 
根据 请 求 的 URL 取 | 
得 对 应 的 处 理 类 ! 
| 
[ee 


图 8-3 应 用 服务 器 处 理 请 求 的 程序 结构 


基于 XML 文件 的 平台 无 关 性 ,在 该 文件 中 定义 的 ajax 请 求 和 处 理 程序 的 对 应 关系 ,可 
以 在 Java 和 CH# 语 言 中 通用 。 该 文件 (RequestOperation. xml) 的 内 容 如 下 所 示 。 





该 文件 起 到 的 另外 一 个 作用 是 规定 了 对 应 处 理 类 的 名 称 , 也 就 是 说 不 管 是 在 Java 中 还 
是 在 C# 中 类 名 都 必须 保持 一 致 。 

(1) Java 中 的 共通 代码 。 在 Java 中 ,需要 借助 于 Servlet 来 完成 请 求 的 处 理 , 所 以 在 
Java 中 就 需要 建立 一 个 Servlet 来 充当 请 求 处 理工 厂 类 ,用 它 来 处 理 所 有 的 ajax 请 求 。 在 
Eclipse 的 工程 中 创建 一 个 名 为 ajaxQuestServletFactory 的 Servlet, 并 把 web. xml 文件 中 
的 配置 文件 修改 为 以 下 所 示 的 代码 。 
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倒数 第 二 行 的 二 url-pattern 之 节点 配置 了 所 有 的 请 求 , 都 由 ajaxQuestServletFactory 
类 来 处 理 。ajaxQuestServletFactory. java 的 核心 代码 如 下 所 示 。 





Action 作为 接口 里 面 定义 了 接收 处 理 的 方法 ,具体 的 代码 如 下 所 示 。 


为 了 在 程序 的 各 个 地 方 能 方便 地 使 用 数据 库 连接 ,需要 对 数据 库 连接 创建 统一 的 类 来 
管理 对 数据 库 的 访问 ,核心 代码 如 下 所 示 。 
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(2) C# 中 的 共通 代码 
在 C# 中 可 以 创建 HomeController. cs 类 来 处 理 所 有 的 ajax 请 求 , 核 心 代码 参考 如 下 : 





创建 IDAL. cs, 充 当 抽 象 产 品 角 色 , 具 体 代码 如 下 : 





共通 的 数据 库 访问 代码 类 SqlHelper. cs 的 代码 如 下 : 
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8.3 ”功能 实现 


在 前 面 的 章节 中 对 系统 的 业务 以 及 程序 的 结构 设计 进行 了 说 明 , 这 些 工作 为 系统 的 具 
体 实现 提供 了 充分 的 准备 ,在 本 节 中 我 们 将 展示 系统 的 一 些 实现 效果 以 及 核心 功能 的 具体 
代码 。 


8.3.1 首页 


订餐 网 站 的 首页 是 网 站 的 门户 ,所 以 一 个 美观 大 方 的 首页 能 很 好 地 吸引 用 户 , 它 直接 影 
响 到 用 户 对 订餐 网 站 的 第 一 印象 。 

(1) 网 页 设计 。 按 照 网 页 设计 的 规则 ,在 首页 中 应 该 包含 网 站 的 导航 栏 , 以 及 热门 菜品 
的 展示 功能 。 整 体 的 设计 界面 如 图 8-4 所 示 。 


one Rirnt ne | 
Welcome to the Online Restaurant 


Only ¥16.00 














图 8-4 网 站 首页 
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(2) 导航 栏 的 实现 。 导 航 栏 中 有 首页 菜单 .账户 管理 ,购物 车 ` 注 销 5 个 一 级 菜单 , 单 
击 相应 的 菜单 能 进入 对 应 的 界面 。 特 别 是 在 购物 车 菜单 上 设置 了 当 鼠 标 悬 停 时 能 展开 购物 
车 内 物品 清单 的 功能 , 且 提供 了 立即 支付 的 功能 。 导 航 栏 的 具体 HTML 实现 如 以 下 代码 
所 示 。 





另外 ,在 页 面 Head 部 分 还 需 引入 对 应 的 CSS 文件 以 及 JavaScript 文件 ,代码 如 下 所 示 。 


CSS 文件 中 的 myanimation. css 和 JavaScript 中 的 jquery-2. 2. 4. min. js、jquery. 
cookie. js 及 其 他 框架 的 代码 请 参考 最 终 程序 。 导 航 栏 的 CSS 代码 如 下 所 示 。 





(3) 明星 菜品 部 分 的 实现 。 主 页 中 需要 展示 主要 的 菜品 信息 ,为 了 实现 该 部 分 的 功能 ， 
本 例 设置 了 背景 图 片 等 信息 ,用 来 衬托 菜品 。 该 部 分 的 具体 实现 如 下 所 示 。 
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EE=* Web 前 端 开 





<a href="#"> 
<div class="FastFood"> 
<div class="icon"> 
<img src="img/k3.png" /> 
</div> 
<h4 class="className"> 快 餐 </h4> 
<p class="classContent"> 
生活 就 应 该 有 生活 的 样子 ,工作 狂 必 备 ,快餐 只 需 一 单 
解决 ! 
</p> 
</div> 
</a> 
</1li> 


</ul> 


</div> 
</div> 
</div> 
</div> 


关于 主页 最 后 部 分 的 
本 章 参 考 程序 的 源 代码 。 


实现 ,由 于 都 是 HTML 和 CSS 的 应 用 , 故 在 此 省 略 , 具 体 请 查询 


8.3.2 菜品 一 览 和 菜品 详情 


在 首页 功能 完成 之 后 


,用 户 需 要 查看 更 多 的 菜品 时 ,需要 到 菜品 一 览 界 面 中 去 查看 。 如 


果 需 要 查看 更 多 的 关于 菜品 的 信息 ,可 以 单 击 菜品 图 片 进入 菜品 详情 界面 ,该 页 面 中 展示 了 


更 多 的 菜品 信息 以 及 用 户 


(1) 网 页 设计 。 界 面 保 
| 





意大利 面 








os 国 29 


对 该 菜品 的 评价 。 
持 了 和 首页 一 样 的 风格 ,具体 的 界面 设计 如 图 8-5 和 图 8-6 所 示 。 


Online Restaurant 


@ “rr 县 风 午 





徘 力 牛排 





| 


白 灼 是 





Only ¥28 





| 
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图 8-5 菜品 的 浏览 界面 
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水 页 鱼 
条 品类 型 : 中 和 Dm: Wz 
推荐 二 节 : 村 各 了 秋 和 工艺 : x 下 
村 
Raw 证 


© ale 
他 

© admin 
sos 





首页 | | Online Restaurant @ «= 购物 千 mm 








图 8-6 菜品 的 详情 界面 





(2) 菜品 一 览 界面 的 实现 。 该 页 面 的 实现 采用 以 下 方法 :在 页 面 加 载 完成 时 向 服务 器 
发 送 ajax 请 求 并 取得 菜品 数据 ,再 以 JSON 的 形式 返回 到 浏览 器 中 ,拼接 成 HTML 语句 以 


用 于 显示 。 所 有 该 部 分 的 前 台 代 码 比 较 简 单 ,具体 的 HTML 代码 如 下 


<div class="FoodList" id="FoodList"> 
</div> 


<div class="pageChange"> 
<ul class="page"> 
<1i><a href="#">&1lt;</a></1li> 
<1i><a href="#">1</a></li> 
<1li><a href="#">2</a></1i> 
<1i><a href="#">3</a></1i> 
<1li><a href="#">&gt;</a></l1i> 
</ul> 
</div> 


名 为 FoodList 的 DIV 就 是 用 来 显示 菜品 清单 的 。 为 了 介绍 代码 
的 样式 信息 预先 定义 ,具体 代码 如 下 所 示 。 


.FoodList { 
width: 1200px; 
margin: 0 auto; 


} 


.FoodItem { 
float: left; 
text-align: center; 


padding: 15px; 


所 示 。 


,需要 将 这 个 DIV 中 
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关于 翻 页 控制 的 CSS 代码 如 下 所 示 。 


页 面 加 载 时 ,利用 jQuery 的 ready 函数 向 服务 器 发 送 HTTP 请 求 并 取得 菜单 信息 的 
JavaScript 代码 如 下 所 示 。 





Web 服务 器 端的 Java 代码 如 下 所 示 。 
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对 应 的 数据 库 连 接 类 food_Dao 的 代码 如 下 所 示 。 





类 似 于 foodBean 这 样 的 和 数据 库 映 射 的 Entity 对 象 的 代码 在 此 处 省 略 , 具 体 请 参考 本 
章 附带 的 实例 代码 。 
Web 服务 器 端的 C# 代码 如 下 所 示 。 
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同样 ,关于 菜品 对 象 的 数据 库 映射 的 Entity 对 象 的 代码 在 此 也 省 略 , 具 体 请 参考 本 章 
附带 的 实例 代码 。 

(3) 菜品 详情 界面 的 实现 。 该 页 面包 含 两 部 分 的 内 容 ,一 是 菜品 的 具体 信息 ;二 是 关于 
这 个 菜品 的 评论 。 菜 品 具体 信息 的 HTML 代码 如 下 所 示 。 





加 载 的 方式 和 菜品 预览 的 方式 一 样 ,也 是 通过 jQuery 的 ajax 发 送 请 求 , 取 得 菜品 信息 
之 后 在 前 台 显 示 , 对 应 的 JavaScript 代码 如 下 所 示 。 





Web 服务 器 端的 Java 代码 如 下 所 示 。 
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对 应 的 数据 库 连接 类 food_Dao 的 代码 如 下 所 示 。 





Web 服务 器 端的 C# 代码 由 于 在 FoodList 的 SQL 语句 中 已 经 包含 了 带 参 数 的 查询 方 
式 ,所 以 这 里 的 代码 比较 简单 ,可 以 直接 调用 之 前 定义 的 方法 ,具体 的 代码 如 下 所 示 。 





下 面 是 菜品 评论 部 分 的 实现 ,HTML 代码 如 下 所 示 。 
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JavaScript 代码 如 下 所 示 。 





“评论 "一览 功能 的 Java 代码 如 下 所 示 。 





对 应 的 Dao 部 分 的 代码 如 下 所 示 。 


添加 评论 的 Java 代码 如 下 所 示 。 





对 应 的 comment_Dao 代码 如 下 所 示 。 


评论 预览 功能 的 C# 代 码 如 下 所 示 。 





添加 评论 的 C# 代 码 如 下 所 示 。 





第 8 章 在 线 林 笃 网 站 | 





new MySqlParameter ("@time",DateTime.Parse (time)) 
和 
int result=SqlHelper.GetExecuteNonQuery (sqlString，Para) 7 
if (result !=-1) 
E 


json=new IJson("AddComment", true, null); 


BE 


return json; 


8.3.3 注册 和 登录 
顾客 在 首页 和 菜品 详情 页 面 了 解 到 菜品 的 具体 信息 且 有 购买 意向 的 时 候 , 需 要 用 户 合 


录 后 才能 锁定 到 具体 的 送 餐 地 址 等 信息 。 
(1) 网 页 设计 。 界 面 的 风格 上 保持 了 和 首页 一 样 的 风格 ,具体 的 界面 设计 如 图 8-7 和 


图 8-8 所 示 。 





图 8-8 用户 登 录 
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(2) 注册 和 登录 功能 的 实现 。 注 册 和 登录 功能 是 每 个 系统 中 必 备 的 功能 ,在 这 里 只 展 
示 HTML 代码 部 分 ,其 他 后 台 代码 部 分 各 位 读者 可 以 自行 完成 。 注 册页 面 的 HTML 代码 
如 下 所 示 。 





主要 的 CSS 代码 如 下 所 示 。 





交互 式 Web 前 端 开 发 实践 








后 台 的 Java 和 C# 代 码 见 本 章 附 带 的 实例 代码 。 


8.3.4 购物 车 


在 菜品 一 览 界面 和 菜品 详情 界面 ,系统 可 以 提供 添加 到 购物 车 的 功能 。 购 物 车 功能 作 
为 购物 网 站 的 必 备 功能 ,具有 将 用 户 感 兴趣 的 商品 收纳 其 中 的 作用 。 
(1) 网 页 设计 。 本 系统 中 ,为 了 使 购物 车 的 页 面 和 订单 页 面 有 所 区 别 , 只 提供 了 一 个 简 
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易 的 购物 车 。 该 功能 在 鼠标 悬 停 于 导航 栏 的 购物 车 菜单 时 直接 下 拉 弹 出 ,还 提供 了 菜品 删 
除 和 立即 支付 的 功能 ,设计 图 如 图 8-9 所 示 。 








~ 


披萨 XxX 






图 8-9 购物 车 


(2) 购物 车 界面 的 实现 。 购 物 车 的 HTML 代码 在 导航 栏 部 分 的 实现 中 已 经 介绍 过 。 
取得 个 人 购物 车 信息 的 JavaScript 代码 如 下 所 示 。 
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对 应 购物 车 的 Java 代码 如 下 所 示 。 





对 应 的 数据 库 操作 部 分 的 Dao 对 应 的 代码 如 下 所 示 。 





购物 车 C# 的 代码 如 下 所 示 。 
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namespace DAL.Factory 


t 


public class DeleteInCart : IDAL 


{ 


/// 删 除 购物 车 内 的 菜品 


public IJson Execute (FormCollection form) 


拒 


IJson json=new IJson(); 

string account=form["account"]; 

string fid=form["fid"]; 

string sqlSstring=@"delete from shop cart where fId=@fid 
and buyerName=@buyerName "7 


MySqlParameter[] para=new MySqlParameter[] 
{ 
new MySqlParameter ("@ fid",fid), 
new MySqlParameter ("@buyerName",account) 
] 
int result=SqlHelper.GetExecuteNonQuery (sqlString, para); 
if (result !=—-1) 


{ 
json.IsSuccess=true; 
} 
else 
下 


json.IsSuccess=false; 
} 


return json; 


8.3.5 订单 管理 


用 产 刺 





单 


之 后 的 菜品 会 进入 订单 页 面 , 订 单 功 能 也 是 商城 类 网 站 中 必 不 可 少 的 功能 , 记 


录 了 顾客 的 购买 数据 ,是 顾客 购买 的 凭证 ,也 是 商家 分 析 菜 品 销量 的 重要 数据 。 
(1) 网 页 设计 。 用 户 端的 订单 页 面 只 提供 了 简单 的 展示 功能 ,具体 的 界面 如 图 8-10 所 示 。 











芋 单 Online Restaurant 购物 和 = 


名 称 单价 数 后 实际 付 歌 交易 状态 





评价 
me 
¥28 1 ¥28 交易 或 功 
评价 
me 
¥48 1 ¥48 交 晤 吕 由 
评价 











国 


8-10 用 户 订单 界面 
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(2) 订单 预览 界面 的 实现 。 该 页 面 的 加 载 方式 和 菜品 预览 界面 的 一 样 , 也 是 采用 在 页 
面 加 载 完成 的 时 候 向 服务 器 发 送 ajax 请 求 来 实现 的 ,具体 的 HTML 代码 如 下 所 示 。 


对 应 的 JavaSeript 代码 如 下 所 示 。 





加 载 订单 预览 功能 的 Java 代码 如 下 所 示 。 





对 应 的 order_Dao 部 分 的 代码 如 下 所 示 。 





在 C# 中 的 后 台 服务 器 端的 代码 如 下 所 示 。 





交互 式 Web 前 端 开 发 实践 








本 章 小 结 


本 章 用 之 前 学 到 的 客户 端 编程 交互 式 技术 完成 了 一 个 简易 的 网 上 订餐 系统 。 这 个 系统 
与 用 JSP 或 者 ASPX 所 开发 的 项 目 最 大 的 不 同 点 是 采用 了 异步 提交 的 方式 来 和 服务 器 进 
行 交互 处 理 。 同 时 ,为 了 满足 Java 和 C# 的 服务 器 端 语言 .本章 对 请 求 采用 了 集中 控制 分 
发 的 设计 ,用 到 了 工厂 模式 。 定 义 了 请 求 和 处 理 类 的 XML 文件 ,能 在 两 种 语言 中 自由 地 使 
用 ,也 限定 了 在 不 同 语言 中 的 类 名 的 命名 必须 保持 一 致 。 关 于 这 个 项 目的 后 台 管 理 程序 没 
有 在 本 章 中 做 讲解 ,希望 读者 能 根据 这 样 的 设计 ,并 结合 本 章 的 代码 实例 ,自行 完成 在 线 订 
和 餐 系 统 的 后 台 管 理 功 能 模块 。 
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